Instalación y configuracion de Jest + React Testing Library

Apunte para configuración rapida de Jest en proyectos React creado con Vite

En proyectos de React + Vite

1.- Instalaciones

yarn add --dev jest babel-jest \ 
               @bale/core @babel/preset-env @babel/preset-react 

yarn add --dev @testing-library/react @types/jest \ 
               jest-environment-jsdom

2.- Opcional: Si usamos Fetch API en el proyecto:

yarn add --dev whatwg-fetch

3.- Actualizar los scripts del package.json

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

4.- Crear la configuración de babel babel.config.cjs

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

5.- Crear Jest config y setup:

jest.config.cjs

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';