Learn best testing practices from the MSW creator Enroll now

The industry standard for API mocking in JavaScript.

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.

import { http
, HttpResponse
 } from 'msw/http'
import { setupWorker
 } from 'msw/browser'

// Describe the network once.
const handlers
 = [
  http
.get
<{ id
: string }>('https://acme.com/product/:id', ({ params
 }) => {
    return HttpResponse
.json
({
      id
: params
.id
,
      title
: 'Porcelain Mug',
      price
: 9.99,
    })
  }),
]

// Integrate API mocking anywhere.
const worker
 = setupWorker
(...handlers
)
await worker
.start
()

Trusted by teams at

API mocking that feels like an extension of JavaScript.

Standard-first API mocking

MSW doesn't reinvent the wheel. How do you handle the network in JavaScript? With the Fetch API! And that's precisely how you write your mocks.

Our philosophy

http.post('/user/:id', async ({ request, params }) => {
  const user = await request.clone().json()
  const headers = request.headers
  headers.set('x-mocked', 'true')

  return Response.json(
    { ...user, id: params.id },
    { headers },
  )
})

Describe the network once

The era of patching window.fetch is over. MSW pioneered transparent network interception where you describe your mocks once and they work everywhere.

Integration guides

export const handlers = [
  http.get('/user', () => {
    return HttpResponse.json({ id: 1 })
  }),
]

// One mock that works everywhere.
fetch('/user')
axios.get('/user')
useSWR('/user')

Unmatched feature set

Mock REST, GraphQL, Server-Sent Events, and WebSocket APIs with a single network contract, simultaneously.

Compare with other tools

const github = graphql.link('https://api.github.com/graphql')
const binance = ws.link('wss://stream.binance.com/ws')

export const handlers = [
  http.get('https://api.stripe.com/v1/balance', resolver),
  github.query('GetRepository', resolver),
  sse('https://api.openai.com/v1/responses', resolver),
  binance.addEventListener('connection', resolver),
]

API mocking that actually lets requests happen

A decade worth of research to bring you the network interception algorithm that combines the impossible: actually perform requests while giving you full control over them.

Browser

Service Worker API

In the browser, MSW leverages the standard Service Worker API to seamlessly intercept production requests.

fetch()Request client
Service WorkerBrowser API
NetworkBrowser networking

Request with MSW Request without MSW

Node.js

@mswjs/interceptors

In Node.js, MSW intercepts raw socket connections at the lowest possible level before they reach the actual network code written in C.

fetch()Request client
net.connect()Node.js core
net.SocketStream
TCP/TLS wrapsJS bindings for C
NetworkOperating system

Request with MSW Request without MSW

API mocking as a standalone layer for component testing

Become in charge of the network across the entire stack.

Explore integrations

// vitest.setup.js
import { setupServer } from 'msw/node'
import { handlers } from './src/mocks/handlers'

const server = setupServer(...handlers)

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

// test/fixtures.js
import { test as base } from '@playwright/test'
import { defineNetworkFixture } from '@msw/playwright'

export const test = base.extend({
  async network({ context }, use) {
    const network = defineNetworkFixture({ context, handlers })
    await network.enable()
    await use(network)
    await network.disable()
  },
})

// src/main.js
if (import.meta.env.DEV) {
  const { setupWorker } = await import('msw/browser')
  const { handlers } = await import('./mocks/handlers')
  
  const worker = setupWorker(...handlers)
  await worker.start()
}

render(<App />, root)

// src/components/checkout.jsx
worker.use(
  // Stripe rate limits on staging, does my
  // component handle that properly in the UI?
  http.get('https://api.stripe.com/v1/balance', () => {
    return HttpResponse.json(
      { error: 'rate_limit' },
      { status: 429 },
    )
  }),
)

// .storybook/preview.js
import { initialize, mswLoader } from 'msw-storybook-addon'
import { handlers } from '../src/mocks/handlers'

initialize()

export default {
  loaders: [mswLoader],
  parameters: { msw: { handlers } },
}

API mocking that can do more.

Source

Generate request handlers from OpenAPI documents and HAR files instead of writing them by hand.

Learn more View on GitHub

Data

Model, seed, and query your data using schema-based collections with an ORM-inspired syntax.

Learn more View on GitHub

Serve

Turn your handlers into an actual HTTP server, or use them as a middleware in Express, Hono, and Fastify.

Learn more View on GitHub

API mocking beloved by all who ship quality apps.

Kent C. Dodds
Software Engineer and Educator

I've spent numerous hours mocking and stubbing data for tests over the years wishing for a better approach. I was recently introduced to MSW and love how it instantly improves the developer experience.

Alffrey Chemmannoor

Software Engineer

We've switched our tests over to use Mock Service Worker and we haven't looked back ever since.

Michael Haglund

Engineering Manager

I don't think I can use anything other than MSW after picking it up for a project at my previous workplace, to be honest.

Brady Pascoe

Maintainer of React Bootstrap

Mock Service Worker is the best thing that ever happened to the JS community. Sharing mocks between development, unit, and E2E tests has never been that easy.

Tobias Pickel

Software Engineer

Just a shoutout to MSW for being an absolute dream to work with. Simple to get running and it's allowed me to continue working while the backend was down. Much faster than writing a mock server.

Konna Buraun

Software Engineer

I can't even imagine the mock I'd have to contrive to simulate a server sending a CSRF cookie, and with MSW I don't have to!

Derek DeHart

Software Engineer

Mock Service Worker was a life-saver for me when we had a strict deadline and there was no backend.

Rafal Rudol

Senior Frontend Developer

It's quite a genius use of Service Workers—works for both REST and GraphQL API.

Heitor Lessa

AWS EMEA

When it comes to mocking, I always recommend Mock Service Worker. It's amazing and as close as it gets to plug & play.

Matan Borenkraout

Frontend Engineer

Ship Better Products Today

Mock Service Worker is the best way to integrate API mocking across your entire stack. Test, prototype, and debug without sacrificing your application's integrity. Give it a try, it's open-source and free!

Get started in 5 minutes