Mockeo de endpoints con MSW en Jest y React Query

Cuando trabajamos con React Query en proyectos reales, disfrutamos de un conjunto potente de funcionalidades: caché, refetch automático, invalidaciones, estados de carga y error, deduplicación de peticiones y mucho más. Sin embargo, todo esto se puede ver comprometido si en los tests se decide mockear directamente el hook useQuery.

Qué no hacer: mockear useQuery de forma directa. Este enfoque rompe la inteligencia de React Query y provoca efectos indeseados: • No se prueba el caché ni las invalidaciones • No se simulan estados reales como loading, error o reintentos • Se crea un acoplamiento frágil entre el test y la implementación del componente

Qué sí hacer: usar MSW Mock Service Worker para simular el endpoint real. Con MSW se interceptan peticiones reales de fetch o axios y se devuelven respuestas simuladas, preservando la lógica de caché, revalidación y estados de React Query sin recurrir a mocks artificiales del hook.

Configuración esencial de MSW en un proyecto de testing con Jest

1. Instalar la librería: npm install msw --save-dev

2. Crear handlers de API: define un handler que responda a la ruta GET de tu servicio, por ejemplo GET a la ruta api/users devolviendo un listado de usuarios como Rayza y Vitor. Así simulas el backend sin tocar la lógica del cliente.

3. Configurar el servidor de MSW para tests: crea un servidor con setupServer usando los handlers y exporta la instancia para reutilizarla en el entorno de pruebas.

4. Integrar con Jest: inicia el servidor en beforeAll, resetea handlers en afterEach y ciérralo en afterAll. Añade el setup a setupFilesAfterEnv para que todo se cargue antes de tus suites. Con esto, cada test se ejecuta contra un backend simulado pero realista.

Ejemplo práctico

Imagina un componente UserList que usa axios y useQuery para leer api/users. Mientras se resuelve la consulta, renderiza Loading y si ocurre un error muestra Error. Cuando llega la data, itera mostrando los nombres. En el test, envuelve el componente con QueryClientProvider, verifica primero que aparece Loading y después espera a que se muestren Rayza y Vitor. Al no mockear useQuery, el flujo de estados de React Query ocurre de verdad, incluyendo caché y reintentos si los configuras.

Ventajas claras de MSW frente a mocks del hook

• Pruebas de integración más cercanas a producción, incluso con retrasos controlados usando delays • React Query funciona realmente con su caché, revalidación, estados y deduplicación • Mocks más mantenibles, reutilizables y alineados con E2E en Playwright o Cypress • Menor acoplamiento a la implementación del componente y mayor robustez de los tests

Buenas prácticas clave

• Mockea el endpoint, no el hook • Usa MSW para cubrir casos de éxito, error, estados intermedios y tiempos de respuesta variables • Aísla la creación del QueryClient en utilidades de test para tener control del caché y los retries • Diseña handlers reutilizables por dominio o recurso para mantener consistencia

Conclusión

Evita los mocks directos de useQuery si quieres conservar la potencia de React Query en tus pruebas. Con MSW simulas una API realista y validas de verdad comportamiento de caché, revalidaciones, estados de carga y errores. Este enfoque produce pruebas más cercanas a la realidad, más confiables y más fáciles de evolucionar a largo plazo.

En Q2BSTUDIO somos una empresa de desarrollo de software con foco en aplicaciones a medida y software a medida, y acompañamos a nuestros clientes en la implantación de pipelines de calidad, testing y observabilidad. Si buscas construir productos robustos con una base de pruebas sólida y escalable, descubre más sobre nuestros servicios de desarrollo multiplataforma en desarrollo de aplicaciones y software a medida.

Nuestro equipo también es especialista en inteligencia artificial, ia para empresas y agentes IA, ciberseguridad, servicios cloud aws y azure, y servicios inteligencia de negocio con power bi. Si te interesa incorporar casos de uso de IA en tu ciclo de desarrollo y operaciones, explora cómo lo hacemos en soluciones de inteligencia artificial. Además, ofrecemos estrategias de ciberseguridad y pentesting, automatización de procesos, y analítica avanzada para potenciar la toma de decisiones.