5月29日 22:54

axios 代码怎么做单元测试?Mock 请求的常用方案有哪些?

测试 axios 代码的核心是 隔离网络请求,常用方案有三种:axios-mock-adapter、jest.mock + msw。

axios-mock-adapter: 直接拦截 axios 实例的请求,按 URL 和方法注册 mock 响应。适合纯 axios 项目,API 直观。示例:mock.onGet('/api/user').reply(200, { name: 'test' })。可模拟超时、网络错误、指定状态码。缺点是绑定了 axios 实例,切换请求库需重写 mock。

jest.mock('axios'): 直接 mock axios 模块,控制 axios.get/post 等方法的返回值。适合快速编写测试,jest.mock('axios') 后用 axios.get.mockResolvedValue() 设定返回。优点是零依赖,缺点是绕过了拦截器逻辑,无法测试中间件行为。

MSW(Mock Service Worker): 在 Service Worker 层拦截请求,不依赖任何 HTTP 库。最接近真实网络行为,可共享给集成测试和 E2E。通过 handler 匹配请求并返回 mock 数据。推荐用于新项目。

选型建议: 项目只用 axios → axios-mock-adapter;需要快速单元测试 → jest.mock;多请求库或需要更真实模拟 → MSW。

追问:

  1. jest.mock 和 jest.spyOn 在 mock axios 时有什么区别?
  2. 如何测试请求拦截器中的 Token 注入逻辑?
  3. MSW 的 Service Worker 在 Node 环境下如何工作?
  4. 如何模拟 axios 的网络超时和 5xx 错误场景?
  5. axios-mock-adapter 能否模拟请求进度(onUploadProgress)?
标签:JavaScript前端Axios