MSW for API Mocking in Tests and Development

Tests that fetch real APIs are slow, flaky, and create test data in production. Mocking fetch/axios manually is repetitive and doesn't test real network behavior.

Use MSW (Mock Service Worker) to intercept requests at the network level.

// 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/users', async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({ id: '3', ...body }, { status: 201 });
  }),

  http.get('/api/users/:id', ({ params }) => {
    if (params.id === '999') {
      return new HttpResponse(null, { status: 404 });
    }
    return HttpResponse.json({ id: params.id, name: 'Alice' });
  }),
];

// src/mocks/server.ts (Node.js for Jest/Vitest)
import { setupServer } from 'msw/node';
import { handlers } from './handlers';
export const server = setupServer(...handlers);

// test setup
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

// Override in a specific test
test('handles error', async () => {
  server.use(http.get('/api/users', () => new HttpResponse(null, { status: 500 })));
  // ...
});

MSW intercepts at the network layer (service worker in browser, Node.js interceptors in tests), so your code uses the real fetch/axios API unchanged. Handlers are reusable between tests and development.