Learn how to set up Vitest and React Testing Library in an existing Vite project.
We'll install the necessary packages, configure Vitest with your existing Vite setup, update TypeScript settings, and write a basic unit test that renders a React component and verifies the results of the rendering.
[00:00] you need to get vitest React Testing Library running. testing-library/react need vitest the testing framework, testing-library/jest-dom slashjazdomtestinglibrary, and JSDom to render our components in a browser-like environment and run some checks on them. Create a new folder test in the source folder and inside this a file called setup.ts. This file will import testing-library/jest-dom which will make the assertions available in the tests. In the source folder, add the first test file app.test.tsx.
[00:39] Add a new test suite using the describe block and inside a single test case with some simple description. You can already see that TypeScript doesn't recognize the describe and the it blocks. npx test, In addition to this, if you would run this test file now with MPXVTest, you could get an error that describe is not defined. We could import describe and it in every test file, but there's a way to make those available globally in every test. Open vite.config.ts and inside defineconfig create a new object test.
[01:18] add globals:true, Inside addGlobals true, this will help with the describe and it blocks. And we want jsdom as our environment for the tests. And finally, setupFiles will point to the file we created earlier and vitest will run it before app.test.tsx. To help TypeScript recognize the describe and it functions, add vitest/globals to the types array inside your TypeScript configuration file. Now if you switch back to app.test.tsx, you will see that the TypeScript errors are gone, and when you run npx test in the console, the test suite passes and there are no more errors.
[02:00] A nice little shortcut I use in all my projects is the npm test script. Open package.json and inside scripts add test vitest suites. Now you can simply type npm test instead of npx vitest when you want to run the test suits. Now we have everything ready to add a React Testing Library test, so switch back to app.test.tsx and type render and call it with the app component. So app needs to be imported, that's in the same folder like the test file, and render needs to be imported from testing-library/react.
[02:43] Now we can make a meaningful assertion using expect and the getByText query. So inside this query, you will specify only one parameter. That's the text you are looking for inside the DOM. And you will use the toBeInTheDocument matcher to check if this text is actually in the DOM. screen needs to be imported from testing-library/react the same as render, and once you save the file the test will rerun and we already have an error because we were checking for the text Vite-React instead of Vite+React.
[03:22] You can see this error at the top of the console. Let's fix this simple mistake by replacing the dash with a plus sign inside the getByText query. After saving the file, the test will pass without errors.
