单元测试中用Mock拦截AJAX响应，核心是绕过真实网络请求并返回预设数据，以确保测试稳定、快速、可重复；推荐Mock.js（URL拦截+随机数据）或jest.mock（精准mock Axios/fetch）。
在单元测试中用 Mock 拦截并模拟 AJAX 响应，核心是让测试环境绕过真实网络请求，直接返回预设数据。这能保证测试稳定、快速、可重复，不依赖后端服务状态。
选择合适的 Mock 工具
推荐使用 Mock.js 或 jest.mock（配合 Axios）：
- Mock.js：适合 Vue/React 项目早期阶段，无需改业务代码，通过 URL 拦截自动响应，支持随机数据生成和延时模拟；
-
jest.mock：更适合 Jest 单元测试场景，可精准 mock Axios/fetch 实例方法（如
get、post），返回固定或动态数据，便于断言和覆盖率分析。
用 Mock.js 在测试中拦截请求
确保 Mock 只在测试环境启用（避免干扰 E2E 或开发环境）：
- 在测试入口（如
setupTests.js或jest.setup.js）中引入并启用 Mock：
Mock.setup({ timeout: '200-400' }); // 模拟网络延迟
Mock.mock('/api/users', { 'list|5': [{ 'id|+1': 1, 'name': '@cname' }] });
- 运行测试时，只要组件调用
axios.get('/api/users')或原生fetch('/api/users')，就会被拦截并返回上述模拟数据； - 注意：Mock.js 默认拦截所有匹配的请求，若接口路径含动态参数（如
/api/users/123），建议用正则匹配：Mock.mock(/\/api\/users\/\d+/, { id: '@id', name: '@cname' })。
用 Jest + Axios mock 精准控制响应
这是更主流、更可控的单元测试做法：
立即学习“Java免费学习笔记（深入）”；
- 先 mock Axios 模块：
jest.mock('axios'); - 在每个测试用例中设定返回值：
test('should fetch users and update state', async () => {
axios.get.mockResolvedValue({ data: { list: [{ id: 1, name: '张三' }] } });
// 触发组件请求逻辑
await wrapper.vm.fetchUsers();
expect(wrapper.vm.users).toEqual([{ id: 1, name: '张三' }]);
});
- 可分别 mock 成功、失败、加载中等状态：
mockResolvedValue、mockRejectedValue、甚至mockImplementation自定义逻辑； - 测试结束后建议清理：
axios.get.mockClear()，防止测试间干扰。
关键注意事项
避免常见陷阱，让 Mock 真正生效：
- 确认请求 URL 完全一致（包括协议、端口、路径、查询参数），Mock.js 对字符串或正则匹配敏感；
- 如果用了 Axios 的
baseURL，Mock 规则中的 URL 必须包含该前缀，或临时禁用 baseURL 配置； - 不要在生产构建中打包 Mock 代码，可通过
process.env.NODE_ENV !== 'production'或 Jest 的testEnvironment隔离； - 对 POST/PUT 请求，Mock.js 需显式指定 method：
Mock.mock('/api/login', 'post', { code: 0, token: '@string(16)' })。
