Menu
I am new to testing and I was trying to use vitest for testing my mern social media app. looking for references to test a react component using vitest i found this article https://eternaldev.com/blog/testing-a-react-application-with-vitest. following this when i try to render a component i get the error React refresh preamble was not loaded. Something is wrong on running tests . below are relevant codes :
register.test.tsx
import { expect, test, describe } from 'vitest';
import { render, screen } from '@testing-library/react';
// import Register from '../../components/Authentication/Register';
import Fake from '../../Fake';
describe('Registration Component Full functionality testing', () => {
test("should be showing Signup heading", () => {
render(<Fake />);
expect(screen.getByText(/Fake/i)).toBeDefined()
})
})
Fake.tsx
import React from 'react'
const Fake: React.FC = () => {
return (
<div>Fake</div>
)
}
export default Fake
vite.config.ts
/// <reference types="vitest" />
/// <reference types="vite/client" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
test: {
globals: true,
environment: 'jsdom',
setupFiles: './setupTest.ts'
}
})
I am open to share more information about my codebase if required . thanks.
I was trying to render a react component in a test coded using vitest but was getting the error React refresh preamble was not loaded. Something is wrong on doing so. I am expecting any one who knows the answer to deliver a structured answer along with the explanation for what was missing or what was wrong .
418
asked Mar 19 '26 22:03
If you are using Laravel just add @viteReactRefresh into the HTML head in your Laravel blade file: app.blade.php / welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
@viteReactRefresh
@vite(['resources/css/app.css', 'resources/js/Website/app.jsx'])
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
Please ensure you're using updated version of plugin-react:
"@vitejs/plugin-react": "^4.2.1"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
