需要重构 Mock 代码是为了提升可维护性、复用性和与真实接口的一致性。通过集中管理 Mock 数据源、使用工厂函数、对齐真实接口结构、采用 MSW 等拦截器统一接管请求、支持上下文感知响应,并定期同步接口 Schema,使 Mock 更稳定、透明、可预期。

为什么需要重构 Mock 代码
Mock 代码写多了容易失控:接口响应硬编码、数据结构和真实 API 脱节、测试用例一改 Mock 就崩、多人协作时各写各的 fake 数据。重构不是为了“看起来更专业”,而是让 Mock 可维护、可复用、能随真实接口演进。
统一管理 Mock 数据源
避免在每个测试文件里 mock({ name: 'test', id: 1 }) 这样零散写。把 Mock 响应集中到一个地方,比如 mocks/api/ 目录下按模块组织:
-
user.mock.js:导出getUserById、listUsers等函数,返回结构清晰的响应对象或 Promise - 用工厂函数替代静态数据,例如
getUserById(id) { return { id, name: `User ${id}`, role: Math.random() > 0.5 ? 'admin' : 'user' }; },增强灵活性 - 对齐真实接口的字段名、嵌套层级、空值/边界情况(如
items: []、total: 0),减少“测得通但上线就错”
用拦截器替代手动替换
别再反复写 jest.mock('axios') 或重写 fetch。用成熟拦截方案统一接管请求:
DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 测试环境配 MSW(Mock Service Worker):定义 handlers 复用率高,支持延迟、错误、动态响应;启动/清理逻辑集中,不污染全局 fetch
- 单元测试中用 jest.mock 拦截模块时,确保只 mock 接口调用层(如
api/user.js),不 mock 工具函数或状态管理,保持测试粒度合理 - 所有 Mock 请求路径必须和生产环境一致(如
/api/v1/users),避免因路径拼写差异导致“Mock 生效但测试没走 Mock”
让 Mock 具备上下文感知能力
真实接口常依赖参数、Header、Query 或登录态。Mock 也该响应这些变化:
- MSW 的
ctx.params、ctx.request.url.searchParams可提取 ID 或分页参数,返回对应数据 - 用
ctx.status(401)或ctx.delay('infinite')模拟异常流,覆盖 loading、error、retry 场景 - 配合测试描述,例如
describe('when user is admin', () => { setupAdminAuth(); test(...); }),让 Mock 行为与测试意图显性绑定
定期同步真实接口 Schema
Mock 不是写一次就扔一边。建立轻量同步机制:
- 每次后端发版或 Swagger/OpenAPI 更新后,用脚本生成基础 Mock 结构(字段名、类型、必选标记),人工补业务规则
- 在 CI 中加检查:运行
curl -s http://localhost:3000/api/schema.json | diff - mocks/schema.json,提示 Mock 是否过期 - 给关键接口加“快照测试”:保存真实响应样本,对比 Mock 输出是否兼容字段结构(不要求值一致,但要求 shape 一致)
重构 Mock 不是追求完美,而是让模拟行为稳定、透明、可预期。从集中管理起步,用工具接管请求流,再逐步加入上下文和同步机制,团队就能少踩一半接口联调的坑。

















