MSW (Mock Service Worker)
js — so applications and tests can run against realistic mocked responses without changing any application code.
Definition
Mock Service Worker (MSW) is an API mocking library that intercepts outgoing HTTP and GraphQL requests at the network level — using the Service Worker API in browsers or request interception in Node.js — so applications and tests can run against realistic mocked responses without changing any application code.
Overview
Traditional API mocking approaches typically involve mocking the fetch/axios client directly or swapping in a fake data-fetching module, which means test code diverges from what actually runs in production and can miss bugs in the request logic itself. MSW takes a different approach: it registers request handlers that match on URL, method, and body, and intercepts real network requests before they leave the browser or Node process, returning a mocked response. Because the application code makes an actual `fetch` or `XMLHttpRequest` call exactly as it would in production, the request/response cycle being tested is the real one, not a mocked substitute. In the browser, MSW achieves this using a Service Worker that sits between the page and the network, intercepting matched requests and responding without a network round trip; unmatched requests pass through to the real network unmodified. In Node.js (for tests run under Jest, Vitest, or similar), MSW instead patches the underlying request-issuing modules (`http`, `undici`/`fetch`) to achieve the same interception without a browser environment. Handlers are defined declaratively, describing the request pattern to match and the response to return, and can be composed per-test to override default handlers for specific scenarios like error states, slow responses, or edge cases. Because the same handler definitions work in both the browser (for local development against a mocked API) and Node (for automated tests), MSW lets teams maintain a single mocking layer shared across manual development, Storybook stories, and CI test suites. MSW has become a common companion to React Testing Library and Vitest/Jest for integration-style tests that exercise real data-fetching code paths, and to tools like Storybook and Cypress for developing and demoing UI against realistic API behavior before a backend endpoint exists.
Key Features
- Intercepts requests at the network level rather than mocking the fetch client
- Same handler definitions work in browser (Service Worker) and Node.js environments
- Supports REST and GraphQL request matching and mocking
- Unmatched requests fall through to the real network by default
- Per-test handler overrides for simulating errors, latency, and edge cases
- Integrates with Storybook, Cypress, Playwright, Jest, and Vitest
- No changes required to application data-fetching code
- Realistic request/response testing that exercises actual client-side networking logic