Vite + Jest + React Testing Configuration

Vite + Jest + React Testing Configuration

For personal reference and sharing

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' } ],
    ],
};

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.