Instalation and configuration of Jest + React Testing Library
For React + Vite projects
Installs:
yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react
yarn add --dev @testing-library/react @types/jest jest-environment-jsdom
Optional, if we use Fetch API on our project:
yarn add --dev whatwg-fetch
Update scripts into the package.json
"scripts: {
...
"test": "jest --watchAll"
Create babel's configuration
babel.config.js
module.exports = {
presets: [
[ '@babel/preset-env', { targets: { esmodules: true } } ],
[ '@babel/preset-react', { runtime: 'automatic' } ],
],
};
Optional, but highly recommended create Jest config y setup:
jest.config.js
module.exports = {
testEnvironment: 'jest-environment-jsdom',
setupFiles: ['./jest.setup.js']
}
jest.setup.js
// In case We need to set up the FetchAPI
import 'whatwg-fetch'; // <-- yarn add whatwg-fetch
And that's all! I'll let it here to have it on hand, may be useful to someone dealing with testing react apps too.