验证 Vue 封装 API 请求方法的核心是隔离依赖、模拟请求、断言结果；需 mock axios 实例或拦截器，分别测试请求调用、token 注入、错误处理及组件中接口调用时机与参数。
要验证 Vue 中封装的 API 请求方法是否正确，核心是**隔离外部依赖、模拟请求行为、断言返回结果**。不依赖真实网络，而是用 Jest 模拟 axios 实例或拦截器行为，确保测试稳定、快速、可重复。
模拟 axios 实例并测试请求调用
当你的 API 封装基于 axios.create()（如 src/utils/request.js），推荐直接 mock 整个 axios 实例，而不是 mock 全局 axios —— 这样更精准、避免污染其他测试。
- 在测试文件开头 mock 对应的 request 模块：
jest.mock('@/utils/request'); - 导入被测函数（如
login）和 mock 的 request：import { login } from '@/api/user';<br>import request from '@/utils/request'; - 在测试中设置 mock 返回值：
request.post.mockResolvedValue({ code: 200, data: { token: 'abc123' } }); - 调用函数并断言：
const res = await login({ username: 'admin', password: '123' });<br>expect(res.data.token).toBe('abc123');<br>expect(request.post).toHaveBeenCalledWith('/user/login', { username: 'admin', password: '123' });
验证请求拦截器是否正确添加 token
拦截器逻辑（如自动注入 Authorization 头）需单独验证，不能只靠业务函数测试。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 创建一个干净的 axios 实例用于测试：
import axios from 'axios';<br>const service = axios.create();
- 手动挂载请求拦截器（复用你生产代码中的逻辑）：
service.interceptors.request.use(config => {<br> const token = 'test-token';<br> if (token) config.headers.Authorization = `Bearer ${token}`;<br> return config;<br>}); - 发起请求并检查 headers：
const config = await service.get('/test');<br>expect(config.headers.Authorization).toBe('Bearer test-token');
测试响应拦截器对错误状态的统一处理
比如你约定后端返回 { code: 401, message: '登录过期' } 时应 reject 并抛出错误，就要验证这个逻辑是否生效。
立即学习“前端免费学习笔记（深入）”；
- mock 响应数据为失败格式：
request.get.mockRejectedValue({<br> response: { data: { code: 401, message: '登录过期' } }<br>}); - 用
expect(...).rejects.toThrow()断言错误：await expect(getUserInfo()).rejects.toThrow('登录过期'); - 若拦截器中做了跳转或提示（如
Message.error()），可 mock 对应 UI 方法并验证是否被调用。
结合组件测试验证接口调用时机与参数
光测 API 函数还不够，还要确认组件在合适时机（如点击提交后）调用了正确的 API，并传入了表单数据。
- 使用
shallowMount渲染组件，stub 掉 form 组件（避免 validate 逻辑干扰）：stubs: { Form: true, FormItem: true } - mock API 方法（如
jest.mock('@/api/user', () => ({ login: jest.fn() }))） - 触发提交事件：
await wrapper.find('button[type="submit"]').trigger('click'); - 断言 API 是否被调用且参数正确：
expect(login).toHaveBeenCalledWith({ username: 'test', password: '123' });
