MSW Has a Free API Mocking Library — Mock REST and GraphQL APIs Without Changing Your Application Code

Why MSW?

Mock Service Worker intercepts HTTP requests at the network level. Your app code stays untouched — same fetch calls, same axios, same everything. Just add handlers.

npm install msw --save-dev

Define Handlers

import { http, HttpResponse } from 'msw'

export const handlers = [
  http.get('/api/users', () => {
    return HttpResponse.json([
      { id: 1, name: 'John', email: '[e-mail]' },
      { id: 2, name: 'Jane', email: '[e-mail]' },
    ])
  }),

  http.post('/api/users', async ({ request }) => {
    const body = await request.json()
    return HttpResponse.json({ id: 3, ...body }, { status: 201 })
  }),

  http.delete('/api/users/:id', ({ params }) => {
    return new HttpResponse(null, { status: 204 })
  }),
]

Use in Tests (Node)

import { setupServer } from 'msw/node'
import { handlers } from './handlers'

const server = setupServer(...handlers)

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

test('fetches users', async () => {
  const res = await fetch('/api/users')
  const users = await res.json()
  expect(users).toHaveLength(2)
})

Use in Browser (Development)

import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'

const worker = setupWorker(...handlers)
await worker.start()

Now your React app uses mock data during development without backend.

MSW vs json-server vs nock

Feature	MSW	json-server	nock
Network level	Service Worker	HTTP server	Node only
Browser	Yes	Separate	No
Tests	Yes	Separate	Yes
GraphQL	Yes	No	No

---

Need to extract data from any website at scale? I build custom web scrapers — 77 production scrapers running on Apify Store. Email me at [e-mail] for a tailored solution.