依赖注入如何提升前端测试与Mock效率

本文深入剖析了前端依赖注入（DI）在模块化测试与 Mock 切换中的核心实践，强调“零源码修改切换 Mock”的关键不在于简单封装请求逻辑，而在于让 fetch、axios 或服务实例等底层依赖彻底可替换：通过将 requestFn 作为参数传入 Hook/Service、用工厂函数统一创建并注入服务实例、避免滥用 provide/inject 作为 DI 容器，并构建严格对齐真实接口的适配层——确保 Mock 与生产代码共享相同的返回结构、类型定义、错误契约和异步行为。只有当 Mock 不再是临时补丁，而是与真实接口同构的“镜像”，才能真正实现稳定、可靠、可维护的自动化测试与环境无缝切换。

只要所有请求调用不硬编码在业务逻辑里，就能做到零源码修改切换 Mock —— 关键不是“加一层封装”，而是让 fetch、axios.get、new ApiClient() 这些依赖彻底可替换。

把 requestFn 当作参数传给 Hook 或 Service

硬编码 fetch('/api/user') 是最常见也最致命的写法。它锁死了执行环境，无法被 Jest 拦截，也无法在测试中注入错误响应。

• 正确做法是让 Hook 接收一个函数参数：useUser(requestFn = fetch)，内部调用 requestFn('/api/user')
• 生产环境直接调用 useUser()（默认用原生 fetch）
• 测试时传入 useUser(mockFetch)，其中 mockFetch 可返回任意结构、状态码、延迟或抛错
• 若项目用 axios，同样适用：useUser(axios.get) 或 useUser(apiClient.getUser)，无需改 Hook 内部逻辑

用工厂函数统一创建服务实例，别满世界 new

看到 new ApiClient() 出现在多个文件里，说明解耦还没开始——这不是 DI，是批量字符串替换预备态。

• 新建 services.ts，只导出工厂函数：export const createApiClient = (options: { baseUrl: string }) => new ApiClient(options)
• 在入口或顶层组件中一次性构造并注入：const services = { api: createApiClient({ baseUrl: import.meta.env.VITE_API_URL }) }
• 所有业务代码都从 services.api 取实例，而不是自己 new
• Mock 场景下，只需让 createApiClient 返回 mockApiClient，其余代码完全不动

别把 Vue provide/inject 当 DI 容器用

provide('api', new ApiClient()) 看似解耦，实则埋雷：实例在 provide 时就已创建，无法延迟初始化，也无法复用同一实例，类型校验也难做。

• ✅ 正确用法：provide('services', services) —— 提供的是已构造好的稳定对象
• ❌ 错误用法：provide('api', new ApiClient()) —— 每次 provide 都新建，且生命周期失控
• 如果必须按需初始化（比如带 token 的 client），工厂函数应返回函数：createApiClient = () => () => new ApiClient(...)，调用方自行控制时机

适配层比 Mock 本身更重要

很多人以为 Mock 就是“把 mockData 替换成 await axios.get()”，但同步数据和异步响应在 UI 层表现完全不同：加载态、错误态、缓存策略、重试逻辑都会崩。

• 真实接口返回 Promise<{ data: User }>，Mock 数据必须也返回同结构 Promise，不能直接 return mockData
• 推荐统一包装成函数：export const getUser = () => (useMock ? Promise.resolve(mockUser) : apiClient.getUser())
• 确保返回值类型一致、字段层级一致、错误格式一致（比如都走 .catch() 或都用 try/catch）
• 边界情况要提前覆盖：空数组、null 字段、401 登录过期、503 服务不可用 —— 这些不能等上线后才发现

最容易被忽略的一点：Mock 不是临时补丁，它必须和真实接口共享同一套类型定义与错误处理契约。否则所谓“一键切换”，切过去的第一分钟就会爆红。

到这里，我们也就讲完了《依赖注入如何提升前端测试与Mock效率》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！