Saltar al contenido principal

Angular 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 →

Angular Testing Library se construye sobre DOM Testing Library añadiendo APIs para trabajar con componentes de Angular. A partir de la versión 17 de ATL, también debes instalar @testing-library/dom:

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

Alternativamente, puedes usar el comando ng add. Esto configura tu proyecto para usar Angular Testing Library, incluyendo también la instalación de @testing-library/dom.

ng add @testing-library/angular

El problema​

Quieres escribir pruebas mantenibles para tus componentes de Angular. Como parte de este objetivo, necesitas que tus pruebas eviten detalles de implementación de tus componentes y se enfoquen en generar la confianza para la cual fueron diseñadas. Además, requieres que tu suite de pruebas sea mantenible a largo plazo para que refactorizaciones de tus componentes (cambios en implementación pero no en funcionalidad) no rompan tus pruebas ni ralenticen a tu equipo.

Esta solución​

Angular Testing Library es una solución extremadamente ligera para probar componentes de Angular. Proporciona funciones utilitarias sobre DOM Testing Library fomentando mejores prácticas de testing. Su principio rector es:

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

En lugar de manipular instancias de componentes Angular renderizados, tus pruebas trabajarán con nodos DOM reales. Las utilidades de esta biblioteca facilitan consultar el DOM como lo haría un usuario: encontrar elementos de formulario por su texto de etiqueta, localizar enlaces y botones por su texto visible. También ofrece una vía recomendada para encontrar elementos mediante data-testid como "salvaguarda" para casos donde el contenido textual o etiqueta 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.

Angular Testing Library:

  • Reexporta las funciones utilitarias query y fireEvent desde DOM Testing Library.

  • Encapsula las funciones fireEvent de tus componentes para llamar automáticamente detectChanges() tras ocurrir un evento

  • Es agnóstico a frameworks de testing, funciona con cualquier framework