Utiliza Jest para realizar pruebas unitarias en tu proyecto de React

Tiempo de lectura: 2 minutos

Las pruebas unitarias son una parte esencial del desarrollo de software que ayuda a garantizar que las distintas partes de tu aplicación funcionen correctamente. En este tutorial, aprenderemos a escribir pruebas unitarias para un componente React utilizando Jest y @testing-library/react.

Requisitos previos

Asegúrate de tener Node.js y npm instalados en tu máquina antes de comenzar. Puedes verificar esto ejecutando los siguientes comandos en tu terminal:

node --version
npm --version

Si no los tienes instalados, puedes descargar e instalar Node.js desde https://nodejs.org/.

Configuración del Proyecto

1. Crea un nuevo proyecto de React utilizando create-react-app:

npx create-react-app react-testing-tutorial
cd react-testing-tutorial

2. Instala las dependencias necesarias para las pruebas unitarias:

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

Estructura del Componente

Supongamos que tenemos un componente simple de botón en Button.js:

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

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

export default Button;

Escribir Pruebas Unitarias

1. Crea un archivo de prueba para el componente Button. Llamémoslo Button.test.js:

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

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

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

En este ejemplo:

1. El primer caso de prueba verifica que el botón se renderice correctamente con la etiqueta proporcionada.
2. El segundo caso de prueba verifica que la función onClick se llama correctamente cuando se hace clic en el botón.

Ejecutar las Pruebas

Asegúrate de tener el siguiente script en tu package.json:

"scripts": {
  "test": "jest"
}

Luego, ejecuta tus pruebas con:

npm test

Conclusiones

¡Felicidades! Ahora tienes pruebas unitarias básicas para tu componente React. Este es solo un ejemplo simple, pero a medida que tu aplicación crece, podrías agregar más pruebas para garantizar un código robusto y confiable