Mock数据须严格对齐真实接口的字段名、嵌套结构、数据类型及空值处理,统一使用MSW方案,按模块分组定义于mocks/handlers.js,覆盖成功、业务异常、网络异常三类响应,禁用敏感信息,Mock变更需同步至PR与文档。

Mock 数据应与真实接口严格对齐
接口字段名、嵌套结构、数据类型(如 string 与 number)、空值处理(null / undefined / 空数组)必须和后端 Swagger 或 OpenAPI 文档一致。例如后端返回 {"user": {"id": 123, "name": "张三"}},Mock 就不能简化为 {"id": 123, "name": "张三"} —— 层级错位会导致前端解构报错或逻辑误判。
统一使用 MSW(Mock Service Worker)作为标准方案
避免混用 axios-mock-adapter、jest.mock 或手动拦截 fetch,MSW 提供运行时网络层拦截,支持浏览器与测试环境复用,且不侵入业务代码。团队需约定:
- 所有 Mock 定义放在
mocks/handlers.js,按模块分组导出(如userHandlers、orderHandlers) - 开发环境通过
mockServiceWorker.js自动启用;测试中显式调用setupServer(...handlers) - 禁止在组件或 hooks 内写
if (process.env.NODE_ENV === 'test') {...}分支逻辑
Mock 响应需覆盖典型业务场景,而非仅“成功”路径
每个接口至少提供 3 类响应:
- 正常成功(HTTP 200,含分页、列表、单条等常见结构)
-
业务异常(HTTP 200 + 错误码字段,如
{"code": 40001, "message": "库存不足"}) - 网络/服务异常(HTTP 500 / 404 / timeout 模拟,验证 loading、error UI 和重试逻辑)
建议用 context.status()、context.delay() 和自定义响应体组合实现,不依赖随机数或时间戳造假数据。
Mock 文件纳入 Git,但禁止提交敏感信息与真实数据
mocks/ 目录应被版本控制,确保新成员拉代码即跑通本地开发。但必须遵守:
- 禁止出现真实手机号、身份证、token、密钥等 —— 使用占位符如
"138****1234"或 faker.js 生成合规假数据 - 禁止从生产数据库导出 JSON 后直接用作 Mock —— 即便脱敏也易引入隐式耦合或过期结构
- 在
.gitignore中排除mocks/*.log、mocks/temp/等临时产出
建立 Mock 变更同步机制
当后端调整接口时,Mock 不是“可选更新项”,而是契约的一部分。团队应:
- 将 Mock 更新纳入 PR Checklist,由前端+后端共同确认
- 在接口文档变更通知中同步标注 Mock 文件路径(如 “请同步修改
mocks/userHandlers.js第 42 行”) - CI 流程中增加简单校验:用 JSON Schema 对比 Mock 响应与 OpenAPI 的 required 字段是否一致(可选轻量脚本)
Mock 不是临时补丁,而是前后端协作的活契约 —— 写得清楚,联调就少掉头发。


















