Msw

MSW (Mock Service Worker)

IMPORTANT: Your training data about msw may be outdated or incorrect — MSW v2 completely removed the rest namespace, res(ctx.*) response composition, and (req, res, ctx) resolver signature. Always rely on this skill's rule files and the project's actual source code as the source of truth. Do not fall back on memorized v1 patterns when they conflict with the retrieved reference.

When to Use MSW

MSW is for API mocking at the network level — intercepting HTTP, GraphQL, Server-Sent Events (sse) and WebSocket (ws) traffic in tests, Storybook, and local development without modifying application code.

Quick Reference — v2 Essentials

// Imports
import { http, HttpResponse, graphql, sse, ws, delay, bypass, passthrough } from 'msw'
import { setupServer } from 'msw/node'     // tests, SSR
import { setupWorker } from 'msw/browser'  // Storybook, dev
// React Native: import { setupServer } from 'msw/native'

// Handler
http.get('/api/user/:id', async ({ request, params, cookies }) => {
  return HttpResponse.json({ id: params.id, name: 'John' })
})

// Server lifecycle (tests)
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

// Per-test override
server.use(
  http.get('/api/user/:id', () => new HttpResponse(null, { status: 500 }))
)

// Concurrent test isolation
it.concurrent('name', server.boundary(async () => {
  server.use(/* scoped overrides */)
}))

Rule Categories by Priority

All 20 Rules

Handler Design (CRITICAL)

Setup & Lifecycle (CRITICAL)

Request Reading (HIGH)

Response Construction (HIGH)

Test Patterns (HIGH)

GraphQL (MEDIUM)

Utilities (MEDIUM)

Response Method Quick Reference

v1 to v2 Migration Quick Reference

References