Mock Service Worker

MSW

O Mock Service Worker (MSW) é uma biblioteca de mock de API para navegadores e Node.js. Diferente de outras bibliotecas que mockam clientes HTTP (como interceptar o Axios ou mockar o fetch global), o MSW atua diretamente no nível da rede.

Como Funciona

No Navegador: Ele registra um Service Worker real que intercepta as requisições de saída na própria aba “Network” do navegador.
No Node.js (Testes): Ele faz monkey patching nativo das classes http e https, interceptando os requests no nível mais baixo possível sem necessidade de um Service Worker.

Quando Usar

Testes de UI (Jest/Vitest/RTL): Para simular a resposta de APIs reais nos testes de componentes, garantindo que o componente reaja exatamente como agiria em produção, sem saber que a rede é falsa.
Desenvolvimento (API Mocking): Quando o Backend ainda não está pronto, você pode desenvolver o Frontend consumindo endpoints que são mockados silenciosamente pelo MSW no navegador.
Storybook: Para fornecer dados controlados e consistentes para as histórias dos componentes visuais.

Exemplo de Uso

Primeiro, definimos nossos handlers (os endpoints falsos):

import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("/api/users", () => {
    return HttpResponse.json([
      { id: 1, name: "Alice" },
      { id: 2, name: "Bob" },
    ]);
  }),
];

No setup do seu framework de testes (ex: Jest/Vitest), inicializamos o servidor:

import { setupServer } from "msw/node";
import { handlers } from "./handlers";

export const server = setupServer(...handlers);

// Liga antes de todos os testes
beforeAll(() => server.listen());
// Limpa qualquer handler adicionado dinamicamente num teste específico
afterEach(() => server.resetHandlers());
// Desliga no final
afterAll(() => server.close());

Relacionadas: frontend-testing-practices · testing-react-data-fetching