MSW Handler Builder

Mock Service Worker (MSW) is an API mocking library that intercepts HTTP requests at the network level using a Service Worker in the browser or Node.js interceptors in tests. Unlike mock libraries that patch fetch/axios, MSW intercepts real network requests, making mocks transparent and realistic.

Use MSW when you want mocks to work across all HTTP libraries (fetch, axios, ky), when you want to test UI components against realistic network behavior, and when you want the same handlers to work in both browser development and Jest/Vitest tests. Direct fetch mocking is brittle and library-specific.

rest handlers match REST API requests by method and path. graphql handlers match GraphQL operations by operation name regardless of URL. MSW v2 uses the http namespace for REST and graphql namespace for GraphQL operations.

Install MSW with npm install msw --save-dev, then run npx msw init public/ to register the service worker. Create a handlers.js with your handler, pass it to setupWorker (browser) or setupServer (Node/Jest). Call worker.start() in your app entry or server.listen() in your test setup file.

passthrough() tells MSW to not intercept the request and let it proceed to the real network. This is useful for selectively mocking some endpoints while letting others through to real APIs during development.