MSW API Mocking

Intercept and mock network requests with Mock Service Worker (MSW). Defines request handlers at the network layer for tests, Storybook, and local dev — no stubbed fetch, works with REST and GraphQL across browser and Node.

This skill helps you mock APIs realistically with MSW. It writes REST and GraphQL handlers, sets up the browser worker and Node server, integrates with Vitest/Jest and Testing Library, powers Storybook stories with mock data, simulates latency, errors, and pagination, and shares one handler set across tests, stories, and offline dev so mocks stay consistent.

When to use

Use when you need reliable API mocks for unit/integration tests, Storybook, or local development — without touching the real backend or monkey-patching fetch/axios.

Examples

Mock REST for tests

Handlers for a component test

Set up MSW with a Node server and REST handlers to mock the /api/users endpoint for a React Testing Library test, including a 500 error case

Storybook with mock data

Drive stories from MSW

Configure msw-storybook-addon so a Dashboard story renders with mocked GraphQL responses including a loading and empty state