前端 Mock 数据方案如何设计？本地开发、联调和测试有什么区别？
简化版
前端 Mock 方案要按场景分层：本地开发用 Mock 提升独立开发效率，联调用真实后端验证协议，测试用稳定可控数据保证可重复。成熟方案要管理接口契约、异常状态、延迟、权限和数据一致性，不能只 mock 成功响应。
详细版
常见 Mock 场景：
- 本地开发：后端未完成时先开发页面。
- 组件文档：展示不同状态。
- 单元/组件测试：提供稳定输入。
- E2E：控制关键接口或使用测试环境数据。
- 故障演练：模拟超时、500、空列表、权限失败。
设计要点：
- Mock 数据要贴近接口契约。
- 成功、失败、空状态、边界数据都要覆盖。
- 不要让 Mock 长期偏离真实后端。
- 联调阶段必须切真实接口。
- 测试数据要可重复、可重置。
完整版教学
一、Mock 的价值是解耦，但风险是失真
Mock 能让前端不等后端接口完成就开发，也能让测试稳定复现边界状态。但 Mock 一旦和真实接口不一致，就会制造假安全：本地页面看起来完美，联调时字段名、状态码、分页格式全错。
所以 Mock 不是随便写假数据，而是围绕接口契约建立可维护的模拟层。越接近发布，越要用真实接口验证。
需求阶段：接口契约
开发阶段：Mock 并行开发
联调阶段：真实接口验证
测试阶段：稳定数据复现二、本地开发 Mock 关注效率
本地开发中，Mock 主要解决“后端没好但页面要做”。它应该启动方便、切换方便、响应快，并覆盖页面需要的典型状态。常见方式包括 Vite dev server middleware、Mock Service Worker、独立 mock server。
export default {
'GET /api/products': {
list: [
{ id: 1, name: '键盘', price: 199 },
{ id: 2, name: '鼠标', price: 99 }
]
}
}但本地 Mock 不应变成另一个后端项目。太复杂的业务逻辑放在 Mock 里，会增加维护成本。
三、测试 Mock 关注可重复
测试里的 Mock 要稳定、可控、可断言。组件测试通常直接 mock 请求函数或使用 MSW 拦截请求；E2E 可以固定测试环境数据，或只 mock 不稳定第三方接口。目标是每次跑测试得到同样结果。
数字例子：如果 E2E 依赖真实热门商品接口，今天返回 10 条，明天活动下架变 0 条，测试就随机失败。固定 fixture 数据能把这种不确定性去掉。
| 场景 | Mock 目标 | 风险 |
|---|---|---|
| 本地开发 | 快速开发 | 和后端偏离 |
| 组件测试 | 稳定断言 | 过度 mock 实现 |
| E2E | 控制外部不确定性 | 失去真实集成价值 |
| 文档站 | 展示状态 | 示例过旧 |
四、必须覆盖失败和边界状态
很多 Mock 只写成功数据，导致页面没有空状态、错误状态和加载状态。真实上线后，一旦接口 500、网络超时、权限过期，页面就露馅。Mock 方案应该能快速切换状态。
例如订单列表至少要有：正常列表、空列表、加载中、接口失败、登录过期、分页到底。这样组件和页面才能在开发阶段就把状态补齐。
五、接口契约要有来源
Mock 数据最好来自 OpenAPI、后端接口文档、类型定义或契约测试，而不是前端随手编。字段类型、枚举值、分页结构、错误码都要和真实接口一致。否则 Mock 越完善，偏离越隐蔽。
接口契约
├─ 生成 TS 类型
├─ 生成 Mock 模板
└─ 联调时和真实接口比对如果团队成熟，可以引入契约测试，确保前后端对接口结构的理解一致。
六、Mock 和真实接口切换要显式
环境切换不能靠改源码。应通过环境变量、开发代理、开关面板或启动参数切换 Mock/真实接口。并且生产构建必须禁止误连 Mock。CI 也可以检查 mock-only 代码是否进入生产路径。
Mock 心法：开发时用它提速，测试时用它控变量，发布前一定用真实接口验契约。
七、常见误区与追问
- 误区：Mock 只要返回成功数据就够。 还要覆盖空状态、错误、超时、权限和边界数据。
- 误区：Mock 越像完整后端越好。 过度复杂会增加维护成本，核心应围绕接口契约和页面状态。
- 误区：E2E 全部 mock 更稳定。 过度 mock 会失去集成价值，应保留关键真实链路。
- 追问：如何避免 Mock 和后端不一致？ 基于接口契约生成类型和 mock，并在联调/契约测试中校验。
- 追问：MSW 的优势是什么？ 在网络层拦截请求，代码更接近真实调用方式，适合测试和本地开发。
- 追问：生产误连 Mock 怎么防？ 构建环境隔离、CI 检查、生产禁用 mock 开关和 mock 域名。
八、加强记忆
Mock 策略用“开发提速、测试控稳、联调验真”来记。本地 Mock 让前端并行开发，测试 Mock 保证可重复，联调和发布前必须回到真实接口。好的 Mock 不只给成功数据，还要覆盖失败、空状态、权限和延迟。