MSW - JavaScript API Mocking 工具

什么是 MSW？

MSW (Mock Service Worker) 是 JavaScript 行业标准的 API Mocking 工具。它利用 Service Worker API 在网络层拦截请求，让应用代码完全不知道是否在运行 mock，真正实现零侵入的 API 模拟。

安装

npm install msw

快速开始

1. 定义 Mock 处理器

import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('https://api.example.com/users', () => {
    return HttpResponse.json([
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
    ]);
  }),

  http.get('https://api.example.com/users/:id', ({ params }) => {
    return HttpResponse.json({ id: params.id, name: 'Alice' });
  }),

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

2. 浏览器端：setupWorker

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

export const worker = setupWorker(...handlers);
worker.start();

3. Node.js 端：setupServer

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

export const server = setupServer(...handlers);

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

测试集成

// Vitest
import { server } from './setup';
import { http, HttpResponse } from 'msw';

it('returns users list', async () => {
  server.use(
    http.get('/api/users', () => {
      return HttpResponse.json([{ id: 1, name: 'Test' }]);
    })
  );
  // 测试代码...
});

与其他 Mock 工具对比

特性	MSW	MirageJS	json-server
拦截层	网络层	应用层	专用服务器
零侵入	✅	❌	❌
DevTools 可见	✅	❌	❌
测试复用	✅	✅	❌

最佳实践

1. 统一 handlers 文件：所有 mock 定义集中维护
2. 使用 HttpResponse.json()：推荐的新 API，类型安全
3. 善用 server.use() 测试覆盖：单个测试中覆盖默认 mock
4. 模拟错误场景：测试错误处理如 401/403/500

参考

• GitHub: mswjs/msw
• 官方文档: https://mswjs.io/docs