Estrategia de testing para web apps: unit, integración y E2E con Vitest y Playwright
Estrategia práctica de testing para web apps en 2026: pirámide de tests, unit tests con Vitest, integration tests con Testing Library, E2E con Playwright y CI/CD.
Ideas clave
Lo esencial antes de bajar al detalle
- Los tests de integración dan más confianza por tiempo invertido que los unitarios puros en la mayoría de web apps.
- Los tests E2E son los más lentos y frágiles: úsalos para los flujos críticos de negocio, no para todo.
- Un test que pasa cuando hay un bug, o que falla cuando no lo hay, es peor que no tener test.
- El objetivo de los tests no es el 100% de cobertura: es la confianza para desplegar sin miedo.
La pirámide de tests para web apps
La pirámide clásica: muchos unit tests (base), menos integration tests (medio), pocos E2E tests (cima). En web apps modernas con React, los integration tests (componente + datos reales o mocks realistas) suelen ser más valiosos que los unit tests puros. Puedes ampliar con Cuánto cuesta desarrollar una web app en 2026: rangos reales por tipo de proyecto y Autenticación de usuarios en web apps: guía completa con Next.js, NextAuth y Clerk.
Según Testing Library, testea el comportamiento desde la perspectiva del usuario, no la implementación interna.
Unit e integration tests con Vitest + Testing Library
- Vitest: alternativa moderna y rápida a Jest. Compatible con el ecosistema Vite/Next.js.
- React Testing Library: renderiza componentes y aserta sobre lo que el usuario ve y puede hacer.
- Qué testear: lógica de negocio pura (cálculos, validaciones), hooks personalizados, componentes con lógica compleja.
- Qué no testear con unit tests: integración con base de datos real, flujos completos de UI (para eso E2E).
E2E tests con Playwright
- Playwright permite automatizar navegadores reales (Chromium, Firefox, WebKit).
- Flujos críticos a testear con E2E: registro + onboarding, creación de entidad principal, pago o upgrade de plan, flujo de invitación de equipo.
- Usa la base de datos de test con datos seed específicos para cada test. Nunca la base de datos de producción.
- CI/CD: ejecuta los E2E en cada PR con GitHub Actions. Ver CI/CD con Next.js.
Mocking y test doubles
- Mockea las dependencias externas (Stripe, OpenAI, email) en unit e integration tests.
- Para E2E, usa ambientes de test de los proveedores (Stripe test mode, OpenAI en sandbox).
- Evita mocks excesivos: cada mock que se desvíe de la realidad es un test que da falsa seguridad.
Lecturas relacionadas
Sigue por aquí
Cuánto cuesta desarrollar una web app en 2026: rangos reales por tipo de proyecto
Desglose real de precios para desarrollar una web app en 2026: SaaS, dashboard, portal de clientes, marketplace. Qué incluye cada rango y cómo planificar el presupuesto.
Arquitectura de una web app moderna en 2026: frontend, backend, base de datos y APIs
Guía técnica de arquitectura para web apps modernas: capas, patrones, base de datos, autenticación y APIs. Con ejemplos reales y decisiones de diseño.
Autenticación de usuarios en web apps: guía completa con Next.js, NextAuth y Clerk
Guía completa de autenticación para web apps en 2026: opciones, implementación con NextAuth.js y Clerk, manejo de sesiones, roles y seguridad.
Optimización de rendimiento en web apps: guía práctica con Next.js y React
Guía práctica para optimizar el rendimiento de web apps con Next.js y React: Core Web Vitals, lazy loading, caché, queries de base de datos y más.