Desarrollo Frontend · FRO-180

Testing frontend: Vitest, Testing Library y Playwright

Pruebas unitarias, de componente y de extremo a extremo que sobreviven a los cambios de maquetación.

Bajo demanda Avanzado 7 módulos · 31 clases

Formato asíncrono Desarrollo Vitest, Playwright, JavaScript

DESARROLLO

Lo que aprenderás

Configurar Vitest con entorno jsdom, cobertura y ejecución en modo observador dentro de un proyecto existente.
Escribir pruebas de componente con Testing Library consultando por rol accesible y texto visible.
Simular interacción real con userEvent en lugar de disparar eventos sintéticos directamente.
Aislar dependencias de red con MSW y evitar dobles frágiles acoplados a la implementación.
Automatizar recorridos completos en Playwright con localizadores estables y esperas automáticas.
Integrar la suite en un flujo de integración continua con paralelismo, reintentos y trazas de fallo.

Contenido del curso

7 módulos · 31 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Estrategia antes que herramienta 4 clases

Por qué se abandonan las suites de pruebas
Qué capa detecta cada tipo de fallo
El proyecto de prácticas y su deuda
Instalar y configurar Vitest

Módulo 2 · Pruebas unitarias con Vitest 5 clases

Estructura de un fichero de prueba
Aserciones expresivas y mensajes de fallo
Dobles con vi.mock y vi.spyOn
Temporizadores y código asíncrono
Cobertura: leerla sin obsesionarse

Módulo 3 · Pruebas de componente 5 clases

Render y consultas de Testing Library
getByRole frente a selectores de clase
userEvent y la interacción realista
findBy y esperas sin sleeps arbitrarios
Probar estado, props y eventos emitidos

Módulo 4 · Red simulada con MSW 4 clases

Interceptar peticiones en lugar de sustituir fetch
Manejadores compartidos entre pruebas
Escenarios de error, latencia y respuestas vacías
Reutilizar los manejadores en desarrollo

Módulo 5 · Extremo a extremo con Playwright 5 clases

Primer recorrido y modo interfaz
Localizadores estables y getByTestId con criterio
Esperas automáticas y aserciones web
Autenticación y estado inicial reutilizable
Capturas, vídeo y traza al fallar

Módulo 6 · Suite mantenible 4 clases

Datos de prueba y factorías
Aislamiento entre pruebas y limpieza
Detectar y tratar pruebas inestables
Qué no merece la pena probar

Módulo 7 · Integración continua 4 clases

Ejecución en paralelo y fragmentación
Reintentos con criterio y alertas
Informes que el equipo lee
Puertas de calidad antes de fusionar

Requisitos

Experiencia desarrollando en JavaScript o TypeScript con un framework de componentes.
Manejo de npm y de un proyecto con empaquetador ya configurado.
Conviene haber sufrido antes una suite de pruebas que fallaba sin motivo aparente.

Descripción

Una suite de pruebas que se rompe cada vez que alguien cambia una clase de CSS deja de aportar información y acaba desactivada. El problema no suele ser la herramienta, sino qué se afirma y cómo se localizan los elementos. Este curso trata la escritura de pruebas frontend que fallan cuando el comportamiento cambia y solo entonces.

El trabajo se hace sobre una aplicación con deuda de pruebas. Se empieza por la capa unitaria con Vitest, se sube a pruebas de componente con Testing Library apoyadas en roles accesibles y texto visible, se sustituyen los dobles de red por MSW y se cierra con recorridos de extremo a extremo en Playwright. Cada capa se justifica por lo que detecta y por lo que cuesta mantener.

El resultado es una pirámide de pruebas defendible: rápida abajo, selectiva arriba, ejecutable en integración continua con informes útiles cuando algo falla. Desde ahí se abordan las pruebas visuales de regresión, las de accesibilidad automatizadas y la instrumentación de una estrategia de calidad para todo el equipo.

¿Para quién es este curso?

Desarrolladores frontend que heredan una aplicación con pruebas frágiles o sin pruebas.
Perfiles de desarrollo que preparan un proyecto para trabajo en equipo con integración continua.
Responsables técnicos que quieren fijar un criterio común de calidad en el frontend del equipo.