explaingit

mswjs/msw

17,916TypeScriptAudience · developerComplexity · 3/5Setup · moderate

TLDR

A JavaScript library that intercepts outgoing API requests in the browser and Node.js and returns fake responses you define, so the same mock handlers work in unit tests, integration tests, and local development.

Mindmap

mindmap
  root((repo))
    How it works
      Service Worker in browser
      Node.js interception
      Same handlers everywhere
    Request matching
      URL patterns
      Wildcards
      HTTP methods
    Mock responses
      Status codes
      Headers and cookies
      Delays
    Use cases
      Unit tests
      Local dev
      Integration tests
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a frontend against a backend that does not exist yet by returning realistic fake data during local development without touching any production code.

USE CASE 2

Write stable automated tests that never hit a real network, using the same request handlers across unit, integration, and end-to-end test suites.

USE CASE 3

Reproduce a rare API error locally by making MSW return a 500 or malformed response on demand without changing server code.

Tech stack

TypeScriptService Worker APINode.js

Getting it running

Difficulty · moderate Time to first run · 30min

Browser usage requires registering a service worker in your public directory, Node.js usage requires a separate server setup.

In plain English

Mock Service Worker, usually called MSW, is a JavaScript library that lets your web app or your tests pretend an API exists when it does not, or pretend it returns different data than it really does. Instead of replacing the bits of your code that send requests, MSW sits one layer below your code and intercepts the requests themselves, then answers them with whatever fake responses you have defined. In a web browser, MSW does this using the Service Worker API, a standard browser feature normally used for caching pages offline. The service worker catches outgoing network calls and routes them through your mock definitions, the rest of the app keeps running its real code, and you can even inspect the mocked responses in the browser's DevTools network tab as if they were real. In Node.js, where service workers do not exist, MSW uses a separate low-level interception layer that lets you reuse the exact same request handlers. You describe the fake responses with an Express-style routing syntax (using URL patterns, parameters, wildcards, and regular expressions), then return whatever status code, headers, cookies, delay, or body you want. The same handlers work for unit tests, integration tests, end-to-end tests, and local development, so you have a single source of truth for how your network behaves across environments. This makes MSW useful when you are building a frontend against an API that does not exist yet, when you need stable test data, or when you want to debug your app without hitting a real backend. The library is written in TypeScript. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1
Set up MSW in my React app so all /api/user requests return a fake user object during local development without touching the real backend.
Prompt 2
I use Vitest. Show me how to write MSW request handlers that return different responses for success and error cases in the same test suite.
Prompt 3
My backend is not ready yet. Using MSW, mock the /api/products endpoint to return paginated data so I can build the UI today.
Prompt 4
Show me how to share the same MSW handlers between my Jest unit tests and my Playwright end-to-end tests without duplicating any code.
Open on GitHub → Explain another repo

← mswjs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.