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
Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.