Integrar pruebas Unitarias con Jest en React

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos integar prubas con Jest que nos permitan testear los componentes React creados.

Lo primero que tenemos que hacer es instalar Jest:

npm install --save-dev jest

Instalamos testing-library/jest-dom:

npm install --save-dev @testing-library/jest-dom

Instalamos ts-jest

npm install --save-dev ts-jest

Instalamos:

 npm install --save-dev babel-jest

Instalaremos React testing library:

npm install --save-dev @testing-library/react

O si usamos TypeScript:

npm install --save-dev @testing-library/react @types/react-dom @types/react

Además para typescript:

npm i --save-dev @types/jest

Ahora vamos a crear la estructura de carpetas para nuestras pruebas con Jest:

tests/
│   ├── unit/
│   │   ├── components/
│   │   │   ├── Button.test.tsx
│   │   │   └── ...
│   │   └── utils/
│   │       ├── api.test.ts
│   │       └── ...
│   ├── integration/
│   │   ├── auth.test.tsx
coverage/

*Crea solo las carpetas no hace falta añadir los scripts. En los siguientes pasos añadiremos los scripts.

Y vamos a inicializar jest:

npm init jest@latest

Primero pregunta si queremos incluir el compando test dentro de packcage.json. Ponemos Y

Después pregunta si tenemos TypeScript, si lo tenemos ponemos Y y si no N

El enviroment para testear usamos node.

NOs preguntará si queremos coverage reports, en mi caso si que quiero que me genere el archivo coverage. Y selecciono v8.

Si quiero limpiar contextos, resultados… después de realizar cada test marco Y.

Finalmente nos crea la configuración en jest.config.ts

Después tendremos que instalar:

npm install --save-dev ts-node

Y fuera de la carpeta tests pondremos el archivo jest.config.cjs

module.exports = {
  // Indica a Jest que busque archivos de prueba en el directorio 'tests'
  roots: ['<rootDir>/tests'],

  // Indica a Jest que busque archivos con la extensión '.ts' o '.tsx'
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],

  // Configura el transformador para archivos TypeScript utilizando 'ts-jest'
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },

  // Configura las rutas para los archivos de prueba y las pruebas de cobertura
  // Puedes ajustar estas rutas según tu estructura de carpetas
  testMatch: ['<rootDir>/tests/**/*.test.(ts|tsx|js|jsx)'],
  coverageDirectory: '<rootDir>/coverage',
};

Con esta configuración tendremos preparado jest para funcionar.

Si nos da error de module.exports por .eslint, añadimos esto en el archivo .eslintrc.cjs

  env: { browser: true, es2020: true, node: true, commonjs: true, jest:true},

Si usamos TypeScript dentro del archivo tsconfig.json añadimos en compilerOptions:

"types": [
      "jest"
    ],

Ahora vamos a implementar una primera prueba Unitaria de un componente botón:

// Button.js
import React from 'react';

const Button = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

export default Button;

Para testear este elemento, crearemos dentro de tests/unit/components el archivo Button.test.js

// Button.test.js
import '@testing-library/jest-dom';
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('renders button with correct text', () => {
  const { getByText } = render(<Button>Click me</Button>);
  const buttonElement = getByText('Click me');
  expect(buttonElement).toBeInTheDocument();
});

test('calls onClick prop when button is clicked', () => {
  const onClickMock = jest.fn();
  const { getByText } = render(<Button onClick={onClickMock}>Click me</Button>);
  const buttonElement = getByText('Click me');
  fireEvent.click(buttonElement);
  expect(onClickMock).toHaveBeenCalledTimes(1);
});

• Es importante añadir import ‘@testing-library/jest-dom’; para que nos reconozca bien las funciones utilizadas.

Si queremos anidar pruebas distintas podemos utilizar la función describe:

describe('Componente A', () => {
  test('Prueba 1', () => {
    // ...
  });

  test('Prueba 2', () => {
    // ...
  });
});

Y ahora podemos ejecutar la prueba:

npm run test