Introducción: En este artículo explico cómo automatizar pruebas de integración para APIs SSR de Next.js usando Playwright combinado con Mock Service Worker MSW. La dificultad principal es que SSR ejecuta las llamadas HTTP en el servidor, por lo que las técnicas habituales de mocking en el navegador no funcionan sin un puente que intercepte las peticiones en Node.
Resumen del reto: Playwright está pensado para pruebas en navegador y por defecto facilita CSR. Para SSR hay que interceptar las llamadas que hace el servidor Next.js. MSW puede ejecutar mocks en Node mediante setupServer, pero hay que controlar cómo y cuándo se sobrescriben las respuestas para cubrir diferentes escenarios de prueba.
Solución clave: ejecutar la app Next en su puerto por defecto y levantar un servidor de mocks en otro puerto por ejemplo 3001. Crear un mock bridge que arranque MSW en Node y exponga endpoints de control que las pruebas puedan invocar para cambiar la respuesta mock mediante server.use con la opción once true. De este modo cada override afecta solo a la siguiente petición y vuelve al handler por defecto sin necesidad de llamadas a resetHandlers complicadas. Al ejecutar Playwright conviene desactivar la ejecución paralela configurando fullyParallel false y workers 1 para evitar conflictos por estado global en MSW.
Pasos principales y comandos: npx create-next-app@latest my-app --yes cd my-app npm init playwright@latest npm i msw --save-dev npm install -D tsx Crear archivos mocks handlers server y mock-server para levantar MSW con setupServer y exponer POST /api/switch-pokemon que llame a setMockPokemon. Ejecutar en terminales separados: npx tsx mock-server.ts npm run dev npx playwright test.
Detalles técnicos importantes: usar server.use con http.get para el endpoint interceptado y pasar la opción once true para que el override sea de un solo uso. En el bridge reenvía las peticiones hacia MSW y devuelve la respuesta al cliente; maneja respuestas 500 sin payload JSON. En Playwright, esperar a networkidle después de navegar para asegurarse de que la petición SSR ha terminado y capturar capturas de pantalla para verificación visual.
Buenas prácticas: mantener el mock por defecto sencillo, cambiar solo lo necesario en cada test, evitar cambios globales que persistan entre pruebas y limpiar recursos al finalizar. Si necesitas rendimiento y paralelismo investiga maneras de aislar el estado de MSW entre workers o levantar instancias independientes del bridge por cada worker.
Sobre Q2BSTUDIO: En Q2BSTUDIO somos una empresa de desarrollo de software que crea aplicaciones a medida y software a medida adaptado a necesidades empresariales. Somos especialistas en inteligencia artificial y contamos con soluciones de ia para empresas y agentes IA para automatizar procesos y extraer valor de los datos. También ofrecemos servicios de ciberseguridad y pentesting para proteger tus sistemas, así como servicios cloud aws y azure para infraestructura escalable y segura. Si necesitas avanzar en transformación digital podemos ayudarte con proyectos de automatización y soluciones de inteligencia de negocio y power bi.
Si te interesa desarrollar una solución personalizada consulta nuestra página de desarrollo de aplicaciones y software a medida en desarrollo de aplicaciones y software a medida y para proyectos de inteligencia artificial visita servicios de inteligencia artificial. Palabras clave relevantes incluidas naturalmente en este contenido son aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws y azure servicios inteligencia de negocio ia para empresas agentes IA power bi.
Conclusión: Playwright junto con MSW es una buena combinación para probar APIs SSR en Next.js si se implementa un puente de mocks en Node y se gestionan bien los overrides con once true. En Q2BSTUDIO ayudamos a implementar estas arquitecturas y a integrar pruebas automatizadas en pipelines de CI para obtener despliegues más seguros y fiables.
.jpg)