Las pruebas son esenciales para garantizar que nuestra aplicación funcione correctamente y sea fácil de mantener. En React, las pruebas más comunes son pruebas unitarias (para probar funciones individuales) y pruebas de componentes (para probar cómo se renderizan y comportan los componentes). Jest y React Testing Library son herramientas populares para realizar estas pruebas en React.

1. Introducción a pruebas en React

• Jest: Es un marco de pruebas de JavaScript desarrollado por Facebook. Viene incluido en Create React App y permite realizar pruebas unitarias y de componentes.
• React Testing Library: Se centra en pruebas de componentes React basadas en cómo el usuario interactúa con la aplicación, asegurando que los componentes se comporten como se espera.

Para comenzar con las pruebas, asegúrate de que Jest y React Testing Library estén instalados (ya vienen incluidos con Create React App). Puedes ejecutar las pruebas con:

1npm test

2. Pruebas unitarias con Jest

Las pruebas unitarias se usan para probar funciones individuales. Veamos un ejemplo simple de una función que suma dos números y cómo escribir una prueba para ella.

Ejemplo de función de suma (sumar.js):

1export function sumar(a, b) {
2  return a + b;
3}

Prueba unitaria con Jest (sumar.test.js):

1import { sumar } from './sumar';
2
3test('suma de 2 + 3 debe ser 5', () => {
4  expect(sumar(2, 3)).toBe(5);
5});

En esta prueba:

• test es una función de Jest que define una prueba.
• expect verifica si el resultado de sumar(2, 3) es 5.
• toBe es un matcher de Jest que compara el resultado.

3. Pruebas de componentes con React Testing Library

React Testing Library permite probar componentes en función de cómo se ven e interactúan en la interfaz. A continuación, se muestra un ejemplo de un componente de saludo y cómo escribir una prueba para verificar su comportamiento.

Ejemplo de componente Saludo.js:

1import React from 'react';
2
3function Saludo({ nombre }) {
4  return <h1>Hola, {nombre}!</h1>;
5}
6
7export default Saludo;

Prueba de componente con React Testing Library (Saludo.test.js):

1import { render, screen } from '@testing-library/react';
2import Saludo from './Saludo';
3
4test('debe mostrar el saludo con el nombre', () => {
5  render(<Saludo nombre="Ana" />);
6  const saludoElement = screen.getByText(/Hola, Ana!/i);
7  expect(saludoElement).toBeInTheDocument();
8});

En esta prueba:

• render monta el componente Saludo en un entorno de prueba.
• screen permite buscar elementos renderizados, en este caso, el texto “Hola, Ana!”.
• toBeInTheDocument verifica que el elemento se encuentra en el documento.

4. Ejercicio práctico: Escribir pruebas para componentes básicos

Creemos un componente Contador que tenga un botón para incrementar el valor del contador y escribamos pruebas para verificar su comportamiento.

Componente Contador.js:

1import React, { useState } from 'react';
2
3function Contador() {
4  const [contador, setContador] = useState(0);
5
6  return (
7    <div>
8      <p>Contador: {contador}</p>
9      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
10    </div>
11  );
12}
13
14export default Contador;

Prueba del componente Contador.test.js:

1import { render, screen, fireEvent } from '@testing-library/react';
2import Contador from './Contador';
3
4test('debe mostrar el contador inicial en 0', () => {
5  render(<Contador />);
6  const contadorElement = screen.getByText(/Contador: 0/i);
7  expect(contadorElement).toBeInTheDocument();
8});
9
10test('debe incrementar el contador al hacer clic en el botón', () => {
11  render(<Contador />);
12  const boton = screen.getByText(/Incrementar/i);
13
14  // Simular clic en el botón
15  fireEvent.click(boton);
16
17  // Verificar que el contador ahora muestra "Contador: 1"
18  const contadorElement = screen.getByText(/Contador: 1/i);
19  expect(contadorElement).toBeInTheDocument();
20});

En estas pruebas:

1. Verificar el estado inicial:
   • Renderizamos el componente Contador y comprobamos que muestra “Contador: 0” al inicio.
2. Simular interacción:
   • Usamos fireEvent.click para simular un clic en el botón de incrementar.
   • Verificamos que el contador cambie a “Contador: 1” después del clic.

Resumen

Con Jest y React Testing Library, puedes:

• Crear pruebas unitarias para funciones con Jest.
• Realizar pruebas de componentes enfocadas en la experiencia del usuario con React Testing Library.
• Simular interacciones y verificar que los componentes se actualicen según lo esperado.

Este ejercicio muestra cómo realizar pruebas básicas en React, ayudando a asegurar que los componentes funcionen correctamente y que las interacciones del usuario se comporten como se espera.