This content originally appeared on DEV Community and was authored by Thiago Pacheco
It is 2023 and we have so many options to create a react app that it can be hard to choose between tools, but most people are choosing Vite because of its simplicity and speed. If you are one of those people and are looking for an easy way to setup your tests, you came to the right place!
Let's go right to the point with setting up a new application:
Create a new React app with Vite:
yarn create vite
Install the dependencies
yarn
Install the necessary dependencies
yarn add -D vitest jsdom @testing-library/react @testing-library/jest-dom
Add a test script
In your package.json file, add the following line under the scripts attribute:
"scripts": {
+ "test": "vitest"
}
Create a setup tests file
Create a new file under tests/setup.ts with the following content:
import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import matchers from '@testing-library/jest-dom/matchers';
expect.extend(matchers);
afterEach(() => {
cleanup();
});
Configure vite to use this setup
Edit the file vite.config.js in the root folder
plugins: [react()],
+ test: {
+ environment: 'jsdom',
+ setupFiles: ['./tests/setup.ts'],
+ testMatch: ['./tests/**/*.test.tsx'],
+ globals: true
+ }
That is all the configuration needed.
Now, let's go ahead and create a quick test to try this out
Your first test
Create a test file at tests/App.test.tsx
touch tests/App.test.tsx
Add the following content
import { render, screen } from '@testing-library/react';
import App from "../src/App";
describe('App', () => {
it('renders headline', () => {
render(<App />);
const headline = screen.getByText(/It works and you found me!/i);
expect(headline).toBeInTheDocument();
});
});
Run the tests (and expect to fail)
yarn test
Fix the test
Replace the html content of the App.tsx file with the following:
+ return (
+ <div>
+ <h1>It works and you found me!</h1>
+ </div>
+ )
Run the tests
Try running again the tests, it should be working fine now!
This content originally appeared on DEV Community and was authored by Thiago Pacheco
Thiago Pacheco | Sciencx (2023-03-16T19:23:30+00:00) 🚀 Configure Vitest with React Testing Library 🚀. Retrieved from https://www.scien.cx/2023/03/16/%f0%9f%9a%80-configure-vitest-with-react-testing-library-%f0%9f%9a%80/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.