En el vertiginoso mundo del desarrollo web, la calidad del software es clave. Una forma efectiva de garantizar que nuestras aplicaciones funcionen correctamente es realizar pruebas en React que simulen la experiencia real del usuario.
En este contexto, una de las herramientas más populares es React Testing Library: una biblioteca para probar componentes en React que se ha convertido en estándar gracias a su enfoque centrado en el usuario y su compatibilidad con buenas prácticas de accesibilidad.
En este artículo aprenderás qué es React Testing Library, cómo usarla y cómo integrarla en tus flujos de desarrollo para escribir pruebas más fiables, accesibles y resistentes a cambios internos.
¿Qué es React Testing Library?
React Testing Library es una biblioteca diseñada para facilitar las pruebas de componentes en React de forma que se asemejen a cómo interactúa una persona usuaria con tu aplicación.
En lugar de centrarse en detalles de implementación, su enfoque está en validar el comportamiento visible de los componentes. Esto significa que, al utilizar React Testing Library, no accedemos directamente al estado o las props, sino que interactuamos con el DOM como lo haría un usuario real.
📌 Más sobre cómo diseñar interfaces centradas en el usuario en mi artículo:
Diseño web con foco en la experiencia real
¿Cómo funciona?
Cuando trabajamos con React Testing Library, usamos funciones que simulan acciones como hacer clic en un botón, rellenar formularios o buscar texto visible. Esto promueve una mentalidad de testeo alineada con los principios de accesibilidad y uso real.
Por ejemplo, funciones como getByText, getByRole o fireEvent nos permiten escribir pruebas comprensibles y robustas.
Puedes ampliar conceptos de testeo basado en comportamiento en
testing-library.com.
1. Instalación
Puedes instalarla con npm o yarn:
npm install --save-dev @testing-library/react
o
yarn add --dev @testing-library/react
2. Escribir pruebas con React Testing Library
Una vez instalada la biblioteca, puedes comenzar a probar componentes en React. Por ejemplo:
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';
test('renders button with correct text', () => {
render(<Button text="Click me" />);
const button = screen.getByText('Click me');
expect(button).toBeInTheDocument();
});
test('fires onClick event when clicked', () => {
const handleClick = jest.fn();
render(<Button onClick={handleClick} />);
const button = screen.getByRole('button');
fireEvent.click(button);
expect(handleClick).toHaveBeenCalled();
});
🧪 Afirmaciones y utilidades
React Testing Library se apoya en utilidades de @testing-library/jest-dom que enriquecen las afirmaciones disponibles. Algunas comunes:
toBeInTheDocument()toHaveTextContent()toHaveClass()
📘 Aprende más en la documentación oficial de
jest-dom.
📈 Medir la cobertura de tus pruebas
Otro beneficio de usar React Testing Library es su integración fluida con herramientas como Jest para generar informes de cobertura de código.
npm test -- --coverageEsto te ayuda a detectar qué partes de tu aplicación no están cubiertas por pruebas en React, aumentando así la fiabilidad global del proyecto.
❓ Preguntas frecuentes
¿React Testing Library o Enzyme?
Ambas son bibliotecas para testear en React, pero con enfoques distintos. Mientras que Enzyme se enfoca en la estructura interna del componente, React Testing Library promueve pruebas de integración, más resistentes a cambios y más representativas de la experiencia del usuario.
¿React Testing Library funciona con TypeScript?
Sí. React Testing Library es totalmente compatible con TypeScript. Incluye tipos para mejorar la productividad y evitar errores en tiempo de compilación.
Consulta también mi guía: TypeScript: Primeros pasos
¿Necesito Jest para usar React Testing Library?
No es obligatorio, pero sí muy recomendable. Jest ofrece mocks, assertions, snapshots y cobertura de código, convirtiéndose en el complemento perfecto para React Testing Library.