Mock Service Worker

What is Mock Service Worker?

Mock Service Worker is an API mocking library for JavaScript that lets developers write client-agnostic mocks and reuse them across any framework, tool, or environment. Unlike tools that patch window.fetch, Mock Service Worker pioneered transparent network interception, describing the network once so the same mocks work in both the browser and Node.js.

Key Features

• Standard-first API mocking: Mock Service Worker does not reinvent the wheel. Mocks are written using the standard Fetch API primitives, so handlers use the same Request, Response, and Headers objects developers already know from working with the network in JavaScript.
• Describe the network once: A single set of request handlers works everywhere. The same mock defined once responds to fetch, axios, and useSWR calls without per-client patching, replacing the era of patching window.fetch.
• Browser interception via Service Worker API: In the browser, Mock Service Worker leverages the standard Service Worker API to intercept production requests transparently, sitting between the client and the network.
• Node.js interception at the socket level: In Node.js, Mock Service Worker uses @mswjs/interceptors to intercept raw socket connections at the lowest possible level, before requests reach the actual network code written in C.
• Multi-protocol support: Mock REST, GraphQL, Server-Sent Events (SSE), and WebSocket APIs with a single network contract, simultaneously. Handlers can combine http, graphql, sse, and ws links in one set.
• Framework and tool agnostic: Because mocks are client-agnostic, they integrate with any framework, tool, or environment rather than being tied to a specific HTTP client or test runner.
• Node.js test setup helpers: Mock Service Worker provides setupServer from msw/node for Node environments, with lifecycle hooks such as server.listen(), server.resetHandlers(), and server.close() for test setup and teardown.
• Playwright integration: A @msw/playwright package provides defineNetworkFixture for defining network fixtures in Playwright tests.

Use Cases

• Frontend development without a live backend: Developers describe API responses once with Mock Service Worker handlers and let components call them through fetch, axios, or useSWR while the real backend is unavailable or incomplete.
• Automated testing in Node.js: Teams configure setupServer in a test setup file (for example vitest.setup.js), start the server before tests, reset handlers after each test, and close it afterward to keep test network behavior deterministic.
• End-to-end testing with Playwright: Using @msw/playwright, teams define network fixtures so browser tests can rely on controlled API responses.
• Multi-protocol API simulation: Applications that depend on REST endpoints, GraphQL queries, SSE streams, and WebSocket connections at the same time can mock all of them through one handler set, such as combining a Stripe REST call, a GitHub GraphQL query, an OpenAI SSE endpoint, and a Binance WebSocket connection.
• Reusing mocks across environments: A single handler definition can serve local development in the browser and test runs in Node.js, avoiding duplicated mock logic per environment.

Who It Is For

Mock Service Worker is built for JavaScript developers, frontend engineers, and test engineers who need reliable API mocking across browsers and Node.js. It solves the problem of mocks that are tied to a specific HTTP client or environment by letting teams describe the network once and reuse those mocks across frameworks, tools, and test setups, from component development to automated test suites.

Pricing

The source material does not state pricing information for Mock Service Worker. No free tier, trial, or price details are provided.

Frequently Asked Questions

What is Mock Service Worker used for?

Mock Service Worker is an API mocking library for JavaScript used to intercept and mock network requests in both the browser and Node.js. Developers use Mock Service Worker to simulate REST, GraphQL, Server-Sent Events, and WebSocket APIs during development and testing.

How does Mock Service Worker intercept requests in the browser versus Node.js?

In the browser, Mock Service Worker uses the standard Service Worker API to intercept production requests transparently. In Node.js, Mock Service Worker uses @mswjs/interceptors to intercept raw socket connections at the lowest possible level before they reach the network code written in C.

Does Mock Service Worker work with any HTTP client?

Yes. Mock Service Worker writes client-agnostic mocks, so a single handler works with clients such as fetch, axios, and useSWR. This differs from approaches that patch window.fetch, which Mock Service Worker describes as outdated.

Which API types can Mock Service Worker mock?

Mock Service Worker can mock REST, GraphQL, Server-Sent Events, and WebSocket APIs with a single network contract, simultaneously. Handlers for each protocol can be combined in one set of mocks.

How is Mock Service Worker set up in Node.js tests?

Mock Service Worker provides setupServer from msw/node. A typical setup imports the shared handlers, calls server.listen() before all tests, server.resetHandlers() after each test, and server.close() after all tests.