Introducción a los frameworks de testing
Conozca el panorama de testing y las herramientas disponibles para Vue.
Introducción a los frameworks de testing es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.
¿Por qué hacer pruebas?
Las pruebas automatizadas detectan errores antes que los usuarios, documentan cómo debería comportarse el código y le permiten refactorizar con confianza. A medida que crece una aplicación, las pruebas se vuelven esenciales para mantener la calidad sin comprobaciones manuales.
Tres tipos de pruebas
Hay tres niveles principales de pruebas: las pruebas unitarias comprueban pequeñas partes de forma aislada, las pruebas de integración comprueban que las partes funcionan juntas y las pruebas de extremo a extremo (e2e) manejan toda la aplicación como lo haría un usuario real.
Pruebas unitarias
Una prueba unitaria verifica una sola función o componente de forma aislada, con sus dependencias simuladas. Son rápidas y permiten identificar exactamente qué se ha roto. La mayoría de sus pruebas deberían ser unitarias.
function add(a, b) {
return a + b
}
test("add sums two numbers", () => {
expect(add(2, 3)).toBe(5)
})Pruebas de integración
Las pruebas de integración comprueban que varias unidades colaboran correctamente; por ejemplo, un componente junto con su store o un formulario que llama a un wrapper de API. Detectan problemas de conexión que las pruebas unitarias por sí solas no encuentran.
Pruebas de extremo a extremo
Las pruebas e2e abren un navegador real y recorren su aplicación mediante clics, tal como lo haría un usuario. Son las más realistas, pero también las más lentas y frágiles, por lo que se escriben en menor cantidad.
La pirámide de pruebas
La pirámide de pruebas propone muchas pruebas unitarias rápidas en la base, menos pruebas de integración en el centro y un número reducido de pruebas e2e en la parte superior. Esto equilibra la confianza con la velocidad.
Vitest
Vitest es un ejecutor de pruebas moderno y rápido, creado para proyectos basados en Vite. Tiene una API compatible con Jest y funciona sin problemas con aplicaciones Vue 3 creadas con Vite.
npm install -D vitestJest
Jest es un ejecutor de pruebas consolidado, ampliamente utilizado en el ecosistema de JavaScript. Vitest refleja su API (describe, test, expect), por lo que los conocimientos se pueden transferir entre ambos.
describe("math", () => {
test("adds", () => {
expect(1 + 1).toBe(2)
})
})Vue Test Utils
Vue Test Utils es la biblioteca oficial para probar componentes Vue de forma unitaria. Monta un componente en un entorno de pruebas para que pueda interactuar con él y comprobar su resultado.
npm install -D @vue/test-utilsCypress y Playwright
Para las pruebas e2e, Cypress y Playwright son opciones populares. Automatizan un navegador real, lo que permite programar clics, escritura y navegación, y después comprobar lo que ve el usuario.
Elegir su stack
Una configuración habitual de Vue 3 usa Vitest junto con Vue Test Utils para las pruebas unitarias y de componentes, y Cypress o Playwright para las pruebas e2e. Esta combinación cubre toda la pirámide con herramientas modernas y bien respaldadas.
Comprobación rápida
Compruebe sus conocimientos sobre los frameworks de pruebas.
Resumen
Las pruebas tienen tres niveles: unitarias, de integración y e2e, equilibrados mediante la pirámide de pruebas (muchas unitarias y pocas e2e). Un stack moderno de Vue usa Vitest o Jest con Vue Test Utils para las pruebas unitarias, y Cypress o Playwright para las pruebas e2e. A continuación, escribirá pruebas unitarias reales con Vue Test Utils.
Preguntas frecuentes
¿La lección «Introducción a los frameworks de testing» es gratis?
Sí — el texto completo de «Introducción a los frameworks de testing» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Introducción a los frameworks de testing»?
Conozca el panorama de testing y las herramientas disponibles para Vue. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.
¿Cuánto tiempo toma la lección «Introducción a los frameworks de testing»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Introducción a los frameworks de testing
- Pruebas unitarias con Vue Test Utils
- Pruebas de extremo a extremo