Configuración de pruebas con Jest en React

Para configurar un proyecto de React con Jest y crear pruebas unitarias en nuestros componentes, podemos hacerlos siguiendo estos pasos:

Instalaciones

Dependencias de Jest y Babel

npm install -ED jest babel-jest @babel/preset-env @babel/preset-react @types/jest jest-environment-jsdom

Dependencias de Testing Library

npm install -ED @testing-library/react

Dependencias opcionales para la configuración de nuestro archivo jest.setup.js

# Para manejar fetch en pruebas
npm install -ED whatwg-fetch
# Para manejar TextEncoder y TextDecoder si usamos React Router
npm install -ED util
# Para manejar setImmediate en pruebas
npm install -ED setimmediate
# Si usamos variables de entorno en pruebas
npm install -ED dotenv

Configuración de archivos

Creamos un archivo babel.config.cjs

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

Creamos un archivo jest.config.cjs

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|sass)$': '<rootDir>/tests/mocks/styleMock.js',
  },
}

Si usamos CSS en nuestros componentes, debemos crear un mock para los estilos. Creamos un archivo tests/mocks/styleMock.js:

module.exports = {}

Creamos un archivo jest.setup.js

import 'whatwg-fetch'
import 'setimmediate'

import { TextEncoder, TextDecoder } from 'util'

global.TextEncoder = TextEncoder
global.TextDecoder = TextDecoder

// Si usamos variables de entorno en pruebas
import dotenv from 'dotenv'
dotenv.config({
  path: '.env.test'
})

// Si usamos variables de entorno en pruebas, podemos crear un mock para obtenerlas
jest.mock('./src/helpers/getEnvVariables', () => ({
  getEnvVariables: () => ({ ...process.env })
}))

Configuramos jest en jsconfig.json

{
  "typeAcquisition": {
    "include": [
      "jest"
    ]
  }
}

Ejemplo de prueba unitaria

Un ejemplo de una prueba unitaria de un componente HelloWorldApp.jsx podría ser la siguiente:

/* eslint-disable no-undef */
import { render } from '@testing-library/react'
import { HelloWorldApp } from '../src/HelloWorldApp'

describe('Test on <HelloWorldApp />', () => {
  test('should show "Hola Mundo!!!" in the h1', () => {
    const title = 'Hola Mundo!!!'
    const { findByRole } = render(<HelloWorldApp />)

    findByRole('heading', { level: 1 }).then((h1) => {
      expect(h1.innerHTML).toContain(title)
    })
  })
})