vue组件测试mock外部依赖的核心目标是隔离可控：拦截api请求（推荐msw）、覆盖浏览器api、stub子组件、注入mock依赖（provide/router/pinia），只为聚焦组件自身逻辑。
Vue 组件测试中 Mock 外部依赖，核心目标是让组件逻辑在隔离、可控的环境下运行——不走真实网络、不调用真实 API、不依赖浏览器全局对象或第三方库行为。只要外部交互点被合理拦截和替换，测试就能聚焦于组件自身的状态、事件响应与渲染逻辑。
Mock API 请求（fetch / axios）
组件内直接发起请求（如 onMounted 中调用 fetch）是最常见的外部依赖。推荐用 Mock Service Worker（MSW） 拦截网络层请求：
- 在测试环境启动一个 MSW server，预定义接口返回值（成功/失败/延时/空数据）
- 无需修改组件代码，真实还原 HTTP 请求流程
- 支持模拟 status、headers、延时、多次不同响应等边界场景
- 比
jest.mock('axios')更贴近实际，避免因 mock 实现差异引入假阴性
Mock 浏览器 API（localStorage、window、navigator）
当组件读写 localStorage、监听 window.resize 或使用 navigator.geolocation 时，需在测试前覆盖这些全局对象：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章