Saltar al contenido principal

React Testing Library

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

React Testing Library extiende DOM Testing Library añadiendo APIs para trabajar con componentes React.

Instalación​

Para comenzar con React Testing Library, necesitas instalarla junto con su dependencia peer @testing-library/dom:

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

Con TypeScript​

Para obtener cobertura completa de tipos, también necesitas instalar los tipos para react y react-dom:

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

El problema​

Quieres escribir pruebas mantenibles para tus componentes React. Como parte de este objetivo, deseas que tus pruebas eviten incluir detalles de implementación de tus componentes y en su lugar se centren en proporcionar la confianza para la que fueron diseñadas. Además, buscas que tu suite de pruebas sea mantenible a largo plazo para que refactorizaciones de tus componentes (cambios en la implementación pero no en la funcionalidad) no rompan tus pruebas ni ralenticen a ti y a tu equipo.

Esta solución​

React Testing Library es una solución muy ligera para probar componentes React. Proporciona funciones utilitarias ligeras sobre react-dom y react-dom/test-utils, fomentando mejores prácticas de testing. Su principio rector principal es:

Cuanto más se asemejen tus pruebas a cómo se usa tu software, más confianza podrán darte.

En lugar de tratar con instancias de componentes React renderizados, tus pruebas trabajarán con nodos DOM reales. Las utilidades de esta biblioteca facilitan consultar el DOM de la misma forma que lo haría un usuario: encontrar elementos de formulario por su texto de etiqueta (como haría un usuario), encontrar enlaces y botones por su texto (como haría un usuario). También expone una forma recomendada de encontrar elementos mediante data-testid como "salvaguarda" para elementos donde el contenido de texto y la etiqueta no tienen sentido o no son prácticos.

Esta biblioteca fomenta aplicaciones más accesibles y permite acercar tus pruebas al uso real que haría un usuario, dando mayor confianza en que tu aplicación funcionará correctamente en producción.

Esta biblioteca es un reemplazo para Enzyme. Aunque puedes seguir estas pautas usando Enzyme, hacerlas cumplir es más difícil debido a todas las utilidades adicionales que proporciona Enzyme (utilidades que facilitan probar detalles de implementación). Lee más sobre esto en las FAQ.

Lo que esta biblioteca NO es:

  1. Un ejecutor de pruebas (test runner) ni framework de testing

  2. Exclusiva para un framework específico (aunque recomendamos Jest como preferencia, funciona con cualquier framework. Ver Uso sin Jest)

NOTA: Esta biblioteca está construida sobre DOM Testing Library donde reside la mayor parte de la lógica de consultas.

Tutoriales​

Mira el video "¿Qué es React Testing Library?" a continuación para una introducción a la biblioteca.

what is react testing library

Además, no te pierdas este tutorial de React Testing Library.