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 .
