[React + Vite]: Jest + React Testing Library setup

[React + Vite]: Jest + React Testing Library setup.md

Jest + React Testing Library installation and setup

For React + Vite projects

1. Dependencies without TypeScript:

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react 
yarn add --dev @testing-library/react @testing-library/dom @types/jest jest-environment-jsdom

With TypeScript (optional):

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react
yarn add --dev @testing-library/react @testing-library/dom @types/react @types/react-dom

2. Set package.json scripts:

"scripts: {
  ...
  "test": "jest --watchAll"

3. Create babel.config.json file:

{
  "presets": [
    ["@babel/preset-env", { "targets": { "esmodules": true } }],
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

4. Create jest.config.js file:

export default {
  testEnvironment: 'jest-environment-jsdom',
  // setupFiles: ['./jest.setup.js'],
};

Or, if jest.setup.js file will be used (create it at root), include it as setupFiles:

export default {
  testEnvironment: 'jest-environment-jsdom',
  setupFiles: ['./jest.setup.js'],
};

5. Add jest to eslintrc.cjs file:

"env": {
    "jest": true
}

https://testing-library.com/docs/react-testing-library/intro/