Created for the Udemy course React Testing Library with Jest / Vitest
This project was created using this command:
npm create vite@latest vite-starter -- --template react
and then following all of the steps below.
I also removed a few unnecessary files, and updated
- App.jsx
- this README file ๐
npm install -D vitest @vitest/ui eslint-plugin-vitest
npm install -D jsdom @testing-library/jest-dom @testing-library/react
"test": "vitest --watch",
To make jest-dom matchers available in all test files:
- create new file src/setupTests.js
- add these contents:
import "@testing-library/jest-dom";
In .eslintrc.cjs:
- Add this to to the
extends
array:
'plugin:vitest/recommended',
- This step avoids linting errors when using the
test
andexpect
Vitest globals without importing them first.
At the top, require the Vitest plugin:
const vitest = require("eslint-plugin-vitest");
Then Add this property / value to the top-level module.exports
object:
globals: {
...vitest.environments.env.globals,
},
Note: if you're having issues getting ESLint to work properly with VSCode, please see this troubleshooting guide.
Update vite.config.js based on the Vitest Testing Library example. Add this property / value to the defineConfig
argument:
test: {
globals: true,
environment: "jsdom",
// this points to the setup file that we created earlier
setupFiles: "./test/setup.js",
// you might want to disable it, if you don't have tests that rely on CSS
// since parsing CSS is slow
css: true,
},
npm test