🛰️ Network Mocking at the Boundary

Problem

Tests that hit a live API are slow, flaky, and fail for reasons unrelated to your code. But mocking your own fetch wrapper means the code you most want to test never runs.

Solution

Intercept at the network boundary instead of stubbing your client. A tool like MSW (Mock Service Worker) answers requests at the transport layer, so your real fetch/axios code, serialization, and error handling all execute against deterministic responses.

Define handlers once and share them between unit, integration, and E2E layers to keep behaviour consistent.

Snippet

import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  http.get('/api/users/:id', ({ params }) =>
    HttpResponse.json({ id: params.id, name: 'Ada Lovelace' }),
  ),
);

beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
afterEach(() => server.resetHandlers());
afterAll(() => server.close());