Introducción
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Vue Testing Library se construye sobre DOM Testing Library al agregar APIs para trabajar con componentes Vue. Está construida sobre @vue/test-utils, la biblioteca de pruebas oficial para Vue.
En resumen, Vue Testing Library realiza tres funciones:
Reexporta utilidades y helpers de consulta de
DOM Testing Library.Oculta métodos de
@vue/test-utilsque entran en conflicto con el Principio Guía de Testing Library.Modifica algunos métodos de ambas fuentes.
Inicio rápido
Si usas Vue2
- npm
- Yarn
npm install --save-dev @testing-library/vue@5
yarn add --dev @testing-library/vue@5
Si usas Vue3
- npm
- Yarn
npm install --save-dev @testing-library/vue
yarn add --dev @testing-library/vue
Ahora puedes usar todos los comandos getBy, getAllBy, queryBy y queryAllBy de DOM Testing Library. Consulta la lista completa de queries.
También te puede interesar instalar @testing-library/jest-dom para usar los matchers personalizados de Jest para el DOM.
El problema
Quieres escribir pruebas mantenibles para tus componentes Vue. Como parte de este objetivo, deseas que tus pruebas eviten incluir detalles de implementación de tus componentes. Prefieres centrarte en que tus pruebas te brinden la confianza para la que fueron diseñadas.
Esta solución
Vue Testing Library es una solución muy ligera para probar componentes Vue. Proporciona funciones utilitarias simples sobre @vue/test-utils, fomentando mejores prácticas de prueba.
Su principio guía principal es:
Cuanto más se asemejen tus pruebas a cómo se usa tu software, más confianza podrán darte.
Así que en lugar de trabajar con instancias de componentes Vue renderizados, tus pruebas interactuarán con nodos DOM reales.
Las utilidades de esta biblioteca facilitan consultar el DOM de la misma manera que lo haría un usuario. Te permiten encontrar elementos por su texto de etiqueta, localizar enlaces y botones mediante su texto, y verificar que tu aplicación sea accesible.
También expone una forma recomendada de encontrar elementos mediante data-testid como "salida de emergencia" para elementos donde el contenido de texto y la etiqueta no tienen sentido o no son prácticos.