Instalación y configuración de Jest + React Testing Library - Vite

Configuración rápida de Jest y react Testing Library en proyectos de React creados con Vite

1. Instalación de Jest:

pnpm i -D jest babel-jest @babel/core @babel/preset-env @babel/preset-react

2. Instalación de React Testing Library:

pnpm i -D @testing-library/react @types/jest jest-environment-jsdom

3. Opcional: Si usamos Fetch API en el proyecto con node inferior a la versión 18:

pnpm i -D whatwg-fetch

4. Actualizar los scripts del package.json

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

5. Crear la configuración de babel: babel.config.cjs en la raiz del proyecto:

module.exports = {
    presets: [
        [ '@babel/preset-env', { targets: { esmodules: true } } ],
        [ '@babel/preset-react', { runtime: 'automatic' } ],
    ],
};

6. Opcional, pero eventualmente necesario, crear Jest config y setup en la raiz del proyecto:

jest.config.js

module.exports = {
    testEnvironment: 'jest-environment-jsdom',
    setupFiles: ['./jest.setup.js']
}

jest.setup.js

// En caso de necesitar la implementación del FetchAPI
import 'whatwg-fetch'; // <-- yarn add whatwg-fetch