MSW 是什么
MSW（Mock Service Worker）在网络层拦截请求：浏览器端通过 Service Worker 拦截 fetch 与 XHR，Node 端通过请求拦截器处理。前端开发与测试共用同一套 handler 定义，不用为测试单独维护一套 mock 层，也不需要改动业务代码或替换请求库。
基本信息
| 定位 | 网络层 mock，浏览器与 Node 环境共用 handler |
|---|---|
| 工作机制 | 浏览器用 Service Worker，Node 端用请求拦截 |
| 典型用途 | 组件测试、开发调试、Storybook、前后端联调前自测 |
| 版本注意 | 2.x 用 http 与 HttpResponse API；1.x 是 rest 与 res 组合 |
| 未匹配请求 | 默认放行到真实网络，可配置为报错 |
典型使用场景
- 组件测试：后端未就绪或不想依赖测试环境时提供稳定响应
- 错误分支验证：模拟 500、超时、畸形 JSON，检查前端错误处理
- 开发调试：无后端环境下让页面先跑起来
- Storybook 走查：为组件故事提供固定数据场景
- 契约对齐检查：对照 OpenAPI 定义写 handler，暴露字段不一致
- 端到端前的快速验证：先用 mock 跑通主流程再造真实数据
handler 定义与测试集成
handler 定义与测试集成
import { http, HttpResponse } from 'msw'; // 2.x API
export const handlers = [
http.get('/api/user', () => HttpResponse.json({ name: 'alice' })),
http.post('/api/order', async ({ request }) => {
const body = await request.json();
return HttpResponse.json({ id: 1, ...body }, { status: 201 });
}),
];
// 测试中：server.listen({ onUnhandledRequest: 'error' })
// 每个用例后：server.resetHandlers() 清理临时覆盖常见 handler 场景
| 场景 | 实现要点 | 验证目标 |
|---|---|---|
| 成功响应 | 返回 200 与正常数据 | 主流路径 |
| 业务错误 | 返回 4xx 与错误码 | 前端提示与分支 |
| 服务异常 | 返回 500 或网络错误 | 降级与重试逻辑 |
| 慢响应 | 延迟返回 | 加载态与超时处理 |
| 数据边界 | 空数组、超长文本、缺字段 | 空态与健壮性 |
浏览器端要先生成并注册 worker 脚本（msw init 生成 public 目录下的 mockServiceWorker.js），否则拦截不生效；只在 Node 环境跑测试时不依赖该文件。
MSW 拦截发生在网络层，因此业务代码、请求库与拦截器行为都按真实路径执行——这与替换请求模块的老式 mock 相比，更接近真实运行。