React Testing

React Testing Library es una librería de pruebas enfocada en facilitar la prueba de aplicaciones React de una manera que se asemeje más a cómo los usuarios interactúan con tu aplicación. A diferencia de otras librerías de prueba como Enzyme, que se enfocan en pruebas unitarias y en la manipulación de componentes de manera interna (por ejemplo, accediendo a los métodos y el estado de los componentes), React Testing Library se enfoca en las pruebas de integración y en cómo interactúan los usuarios con la interfaz de la aplicación.

¿Para qué sirve?

React Testing Library permite escribir pruebas que interactúan con los elementos de la UI de la misma manera que lo haría un usuario, como hacer clic en botones, rellenar formularios, etc. Se trata de hacer pruebas más cercanas a la experiencia real del usuario.

Instalación

Si no lo tienes instalado, puedes agregarlo a tu proyecto usando npm o yarn:

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

Cómo se usa

La React Testing Library proporciona varias utilidades para interactuar con la UI. Algunas de las funciones clave son:

1. render: Renderiza el componente React en un entorno de prueba.

2. screen: Proporciona acceso a los elementos renderizados.

3. fireEvent: Permite simular eventos como clics, cambios de texto, etc.

4. waitFor: Permite esperar por elementos que cambian en la UI de manera asíncrona.

Ejemplo básico de uso

Supongamos que tienes un componente llamado Button que simplemente muestra un texto y ejecuta una función cuando se hace clic en él.

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

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

export default Button;

1. Prueba básica de renderizado

Primero, renderizamos el componente en el entorno de prueba y verificamos que su contenido esté presente.

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

test('renders button with text', () => {
  render(<Button>Click me</Button>);
  
  // Verifica que el botón tiene el texto "Click me"
  const buttonElement = screen.getByText(/click me/i);
  expect(buttonElement).toBeInTheDocument();
});

2. Simulación de un evento (click)

Ahora vamos a probar que el botón llama a una función cuando se hace clic en él.

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

test('calls function on click', () => {
  const handleClick = jest.fn(); // Función simulada para la prueba

  render(<Button onClick={handleClick}>Click me</Button>);

  const buttonElement = screen.getByText(/click me/i);
  fireEvent.click(buttonElement); // Simula un clic en el botón

  // Verifica que la función se haya llamado
  expect(handleClick).toHaveBeenCalledTimes(1);
});

3. Pruebas asíncronas con waitFor

A veces, las pruebas necesitan esperar a que algo ocurra en la UI después de una acción asíncrona, como una llamada a una API. En este caso, puedes usar waitFor para esperar que un elemento se actualice.

// Example.js
import React, { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      setData('Hello, World!');
    }, 1000);
  }, []);

  return <div>{data}</div>;
}

export default Example;

// Example.test.js
import { render, screen, waitFor } from '@testing-library/react';
import Example from './Example';

test('loads and displays data', async () => {
  render(<Example />);

  // Espera que el texto se actualice
  await waitFor(() => screen.getByText(/hello, world/i));

  // Verifica que el texto se haya mostrado
  expect(screen.getByText(/hello, world/i)).toBeInTheDocument();
});

Funciones útiles

• screen.getByText(): Busca un elemento con el texto específico.

• screen.getByRole(): Busca un elemento con un determinado rol, como un botón o un enlace.

• screen.getByLabelText(): Busca un elemento basado en la etiqueta asociada (útil para formularios).

• fireEvent.click(): Simula un clic sobre un elemento.

• waitFor(): Permite esperar hasta que un elemento se renderice o cambie.

Ventajas de React Testing Library

1. Pruebas basadas en el comportamiento del usuario: Ayuda a hacer pruebas más realistas, centradas en cómo el usuario interactúa con la interfaz, no solo en cómo se implementan internamente los componentes.

2. Fácil de usar: La API es muy sencilla y se enfoca en obtener los elementos como un usuario lo haría.

3. Mejores prácticas de accesibilidad: Fomenta buenas prácticas en términos de accesibilidad, ya que se alienta a usar roles y etiquetas de accesibilidad para seleccionar elementos.

Conclusión

React Testing Library es ideal para hacer pruebas en aplicaciones React, ya que simula cómo los usuarios interactúan con la UI, en lugar de enfocarse en detalles de implementación. Es fácil de usar y promueve buenas prácticas de desarrollo y accesibilidad en la prueba de interfaces.