Desarrollo y Testing

Mock Service Worker (MSW)

Intercepta solicitudes de red a nivel de service worker para simulación de APIs fluida en pruebas y desarrollo.

Claude Code Codex Copilot Cursor Gemini CLI Windsurf

Descripción General

Mock Service Worker (MSW) intercepta solicitudes HTTP a nivel de red usando un Service Worker en el navegador y un interceptor de solicitudes en Node.js. A diferencia de simular fetch o axios directamente, MSW funciona con cualquier cliente HTTP y proporciona comportamiento de red realista incluyendo retrasos, errores y respuestas de streaming. Los agentes de IA pueden definir manejadores que coincidan con tus contratos de API reales.

Tu agente de IA puede escribir manejadores de solicitudes usando la API intuitiva de MSW: http.get, http.post y otros métodos que reflejan tus endpoints REST u operaciones GraphQL. Los manejadores devuelven respuestas simuladas que tus componentes consumen exactamente como consumirían respuestas reales de API. Esto significa que tus pruebas y entorno de desarrollo usan el mismo código, solo con diferentes fuentes de datos.

MSW es especialmente potente para pruebas porque no requiere ningún cambio en el código de tu aplicación. Tu agente de IA puede configurar manejadores para caminos felices, estados de error, estados de carga y casos límite. Puede configurar MSW tanto para historias de Storybook basadas en navegador como para pruebas de Jest/Vitest basadas en Node.js, proporcionando una estrategia de simulación unificada en toda tu suite de pruebas.

¿Para Quién Es?

Desarrolladores frontend simulando respuestas de API durante desarrollo sin backend
Ingenieros de pruebas creando escenarios de red realistas para pruebas de integración
Equipos probando manejo de errores simulando fallos del servidor y timeouts
Usuarios de Storybook simulando dependencias de API para historias de componentes

Instalación

Configurar Claude Code

npm install -D msw
npx msw init public/
Claude Code generates request handlers and test setups

Configuración

// src/mocks/handlers.ts
import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("/api/users", () => {
    return HttpResponse.json([
      { id: 1, name: "Alice" },
      { id: 2, name: "Bob" },
    ]);
  }),
  http.post("/api/login", async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({ token: "mock-jwt-token" });
  }),
];

Visitar Fuente (Sitio Oficial)

Explora herramientas de IA

Las mejores herramientas de IA que complementan tus habilidades

Lee artículos sobre IA y diseño

Consejos y tendencias en el mundo del diseño y la IA

Skills Relacionados

Desarrollo y Testing

Linear MCP Server

Gestiona tareas y tickets de Linear directamente desde tu agente de programación sin salir del editor.

Claude Code Cursor

Desarrollo y Testing

Playwright MCP

Automatiza pruebas de navegador e interactúa con páginas web programáticamente para verificar interfaces de usuario.

Claude Code Cursor Copilot

Desarrollo y Testing

Jest Test Runner

Ejecuta y depura tests unitarios y de integración automáticamente con análisis detallado de errores.

Claude Code Codex Copilot