Instalación y configuracion de Jest + React Testing Library

En proyectos de React + Vite

1. Instalaciones:

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

npm install --dev jest babel-jest @babel/preset-env @babel/preset-react 
npm install --dev @testing-library/react @types/jest jest-environment-jsdom

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

yarn add --dev whatwg-fetch

npm install --dev whatwg-fetch

3. Actualizar los scripts del package.json

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

4. Crear la configuración de babel babel.config.js

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

• Para componentes que importen CSS, crear un archivo llamado: tests/mocks/styleMock.js

module.exports = {};

5. Opcional, pero eventualmente necesario, crear Jest config y setup:

jest.config.js

module.exports = {
    testEnvironment: 'jest-environment-jsdom',
    setupFiles: ['./jest.setup.js'],
    transformIgnorePatterns: [],
    
    // ModuleNameMapper sólo si ocupamos importar CSS en nuestros componentes para el testing
    moduleNameMapper: {
        '\\.(css|less)$': '<rootDir>/tests/mocks/styleMock.js',
    },
}

jest.setup.js

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

6. Variables de entorno:

• Creamos un fichero, yo lo creo en una carpeta helpers con el siguiente código. (Nombre del fichero getEnviroments.js)

getEnviroments.js

export const getEnviroments = () =>{
    import.meta.env;
    return {
        ...import.meta.env
    }
}

• En el fichero jest.setup.js ( es posible que sea necesario instalar dotenv )

jest.setup.js

//ponemos el path en el que se situan las variables de entorno
require('dotenv').config({
    path: '.env'
})
//Creamos un mock con todas las variables de entorno
jest.mock('./src/helpers/getEnviroments',()=>({
    getEnviroments: () => ({...process.env})
}))

• Ya podemos usar en los ficheros test process.env