MSW — API Mocking of the Next Generation

What it is

Mock Service Worker (MSW) intercepts network requests at the service worker layer in the browser and at the request module level in Node.js. You define request handlers that describe how to respond to specific API calls, and MSW intercepts matching requests without modifying your application code. The same mocks work across unit tests, integration tests, Storybook, and local development.

MSW targets frontend developers who need to mock API endpoints for testing and development. It works with any HTTP client (fetch, axios, ky) and any framework (React, Vue, Angular, Svelte).

How it saves time or tokens

Traditional API mocking involves stubbing fetch or axios at the module level, which breaks when you switch HTTP clients or test implementation details. MSW operates at the network level, so your application code makes real fetch calls that are intercepted transparently. This means your tests exercise the actual HTTP layer and your mocks are reusable across testing environments.

How to use

1. Install MSW: npm install msw --save-dev.
2. Define request handlers in a handlers.ts file using http.get(), http.post(), etc.
3. Set up the browser worker with npx msw init public/ --save or the Node server for tests.

Example

// src/mocks/handlers.ts
import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('/api/user', () =>
    HttpResponse.json({ id: 1, name: 'Alice' })
  ),
  http.post('/api/login', async ({ request }) => {
    const body = await request.json();
    if (body.password === 'secret') {
      return HttpResponse.json({ token: 'abc123' });
    }
    return new HttpResponse(null, { status: 401 });
  }),
];

// src/mocks/server.ts (for Node/test environment)
import { setupServer } from 'msw/node';
import { handlers } from './handlers';
export const server = setupServer(...handlers);

Related on TokRepo

• Testing Tools -- API mocking and test utilities
• Coding Tools -- Frontend developer tools

Common pitfalls

• Forgetting to call server.listen() in test setup and server.close() in teardown. Without these, MSW does not intercept requests.
• Not running npx msw init public/ for browser environments. The service worker script must be in your public directory.
• Defining handlers that are too specific (exact URL with query params) when you want to catch all variations. Use URL patterns or regex for flexible matching.