MSW 通过在网络层拦截请求实现真实感测试，不修改代码逻辑或 fetch 实现；支持 Node 端 setupServer 和浏览器端 Service Worker 两种启用方式，可精准模拟正常响应、HTTP 错误、网络异常及加载态。
用 MSW 在网络层拦截真实请求做测试，关键在于它不碰代码逻辑、不改 fetch 实现，而是在浏览器发出请求的瞬间就截住它，返回你预设的响应。这种方式最接近真实网络行为，调试可见、延时可控、错误可模拟，比单纯 mock fetch 函数更可靠。
安装与基础配置
先装依赖：
- npm install msw --save-dev
创建 mock 处理器（如 mocks/handlers.ts）：
- 用
rest.get、rest.post等声明要拦截的 URL 和方法 - 每个 handler 返回
res(ctx.status(), ctx.json())构造响应 - 支持动态读取请求体、查询参数、headers，也能抛出网络错误或设置延迟
在测试中启用 Node 版本 server
MSW 提供 setupServer 用于 Node.js 测试环境（如 Vitest/Jest）：
- 在
test/setup.ts中导入 handlers 并启动 server -
beforeAll(() => server.listen())开启拦截 -
afterEach(() => server.resetHandlers())隔离每个测试用例 -
afterAll(() => server.close())清理资源
在浏览器开发中启用 Service Worker
浏览器端靠真正的 Service Worker 拦截：
- 用
setupWorker创建 worker 实例（如mocks/browser.ts） - 在应用入口（如
main.ts）调用worker.start() - 首次运行会生成
mockServiceWorker.js，自动注册 - DevTools 的 Network 面板能看到被拦截的请求，状态显示为 “(from service worker)”
覆盖典型测试场景
一个健壮的测试不能只测成功路径：
- 正常响应：返回 200 + 正确结构数据，验证组件渲染
- HTTP 错误：用
ctx.status(401)或500，检查错误提示和状态重置 - 网络异常：调用
server.use(rest.get(..., () => Promise.reject()))模拟断网 - 加载态：配合
ctx.delay(500)，验证 loading spinner 是否出现及时
