msw 通过在网络层拦截请求实现真实感测试，不修改代码逻辑或 fetch 实现；支持 node 端 setupserver 和浏览器端 service worker 两种启用方式，可精准模拟正常响应、http 错误、网络异常及加载态。

用 MSW 在网络层拦截真实请求做测试，关键在于它不碰代码逻辑、不改 fetch 实现，而是在浏览器发出请求的瞬间就截住它，返回你预设的响应。这种方式最接近真实网络行为，调试可见、延时可控、错误可模拟，比单纯 mock fetch 函数更可靠。

安装与基础配置

先装依赖：

• npm install msw --save-dev

创建 mock 处理器（如 mocks/handlers.ts）：

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

• 用 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 是否出现及时