Resumen
Implementa unit tests eficaces en un proyecto React/Next.js guiándote con Windsurf en modo chat y la feature de @contexto. Aquí verás cómo obtener un plan por fases, configurar Jest y React Testing Library, resolver incompatibilidades de dependencias y crear pruebas para componentes y páginas, priorizando cobertura y mantenibilidad.
¿Cómo definir la estrategia de unit tests con Cascade?
Usando Cascade en modo chat, se pide la mejor estrategia y un plan ejecutable. La IA analiza estructura, dependencias y archivos .tsx y propone un enfoque de testing piramidal con Jest y React Testing Library.
¿Qué librerías se recomiendan y por qué?
- Jest: runner y assertions para unit tests.
- React Testing Library: pruebas centradas en comportamiento del usuario.
- @testing-library/jest-dom: matchers para el DOM.
- @testing-library/user-event: interacciones de usuario más realistas.
- Mock Service Worker (MSW): recomendado, pero no usado aquí.
¿Cómo queda el plan por fases?
- Fase 1: configuración base. Ajustes en package.json, setup de Jest y archivos de configuración. Estimado: 1–2 horas si se hace manual.
- Fase 2: tests de componentes. Crear pruebas para header y footer con criterios de cobertura y accessibility.
- Fase 3: tests de páginas y utilitarios. Páginas con datos existentes/no existentes y helpers. Objetivo mínimo de coverage threshold > 70% por ítem.
Puntos clave: - Plan detallado con tiempos estimados por fase. - Configuración explícita de Jest y coverage thresholds. - Separación entre componentes, páginas y utilidades.
¿Cómo ejecutar la fase 1 y crear el primer test?
Se cambia a modo code y se pide ejecutar la Fase 1 completa y un solo test de componente de la Fase 2 (para el header). Cascade modifica el package.json, crea la configuración de Jest y agrega utilidades de testing.
¿Cómo resolver errores de instalación y tests?
- Al instalar, aparece un error de compatibilidad entre React y dependencias de testing. Solución: usar npm install con el flag de compatibilidad de peer deps para completar la instalación.
- Ejecutar los tests. El test del header falla en: "shows mobile menu button on mobile" porque corre en escritorio. Se omite temporalmente con skip y el resto pasa.
- Expectativa de cobertura para el header: 90–95% estimado por la IA.
Buenas prácticas: - Instalar dependencias sugeridas antes de correr pruebas. - Ejecutar scripts de test por archivo o globales, según contexto. - Usar skip solo como medida temporal mientras se corrigen escenarios.
¿Cómo usar @contexto para guiar nuevos tests?
Para crear un test de página, se usa la feature de @contexto: al "arrobar" se adjuntan archivos del proyecto al prompt sin copiar su contenido. Se referencia la página del single blog (carpeta [slug] de Next.js) y el test del header como guía.
- Cascade genera el test en la carpeta del slug con casos: cuando el post existe (título y metadata renderizados) y cuando no existe (mensaje de error). Incluye chequeos de accesibilidad y sugiere cobertura ~90–97%.
- Al correr todos los tests, falla el caso de "links a posts relacionados" por problemas de mock. Además, la IA creó una carpeta de test utils no requerida: se elimina.
- Se identifica que los list items están vacíos; se omite ese test temporalmente para que el resto pase. Resultado: todos los tests pasan con dos casos skip.
Aprendizajes clave: - @contexto acelera la creación de prompts precisos sin copiar código. - Revisa siempre el código generado: puede añadir archivos no solicitados. - Depura fallos de mock antes de ampliar cobertura.
Acciones recomendadas: - Validar la configuración de Jest tras la instalación. - Asegurar coverage > 70% por módulo, subiendo gradualmente. - Resolver los tests omitidos: móvil en header y related posts en la página del blog. - Considerar mocks consistentes si se reintroduce MSW más adelante.
¿Probaste ya la feature de @contexto para crear tus tests? Cuéntame en comentarios cómo la aplicaste, qué resultados obtuviste y qué errores te encontraste al probar tus unit tests.