Mock专家级实践聚焦三件事：精准控制数据形态、可靠拦截还原交互逻辑、无缝融入开发测试闭环，分数据模板、函数响应、Jest协同、工程化集成四方向展开。
精通 JS 中 Mock 模拟，关键不在堆砌功能，而在理解“模拟的本质是控制不确定性”。真正专家级的实践，聚焦于三件事：精准控制数据形态、可靠拦截与还原真实交互逻辑、无缝融入开发测试闭环。下面分四个核心方向讲透。
掌握 Mock.js 数据模板的语义化表达
很多人只会用 @cname 或 @integer，但高手靠的是模板规则（DTD）的组合推演：
-
动态依赖建模：用
"userId|+1": 1000生成自增 ID，再让"avatar": "@image('100x100/@color')"自动关联用户色系，实现数据间逻辑耦合 -
概率化布尔控制：写
"isVip|3-7": true表示 30% 概率返回 true，精准覆盖灰度发布或 AB 测试场景 -
嵌套结构按需裁剪：对复杂对象用
"profile|2-4": { "name": "@cname", "bio": "@cparagraph(1,3)" }，每次只随机取 2–4 个字段，模拟接口字段渐进式上线
用函数式响应接管真实请求逻辑
不满足于静态返回，而是用响应函数模拟后端行为：
- 根据
options.url解析路径参数：Mock.mock(/\/users\/(\d+)/, 'get', (opt) => { const id = opt.url.match(/\/users\/(\d+)/)[1]; return { id, name: `User${id}` }; }) - 读取
options.body做简单校验：if (!JSON.parse(opt.body).email) return { code: 400, msg: 'email required' }; - 结合
Mock.Random实现状态机：如登录接口返回{ token: id > 99 ? '@guid' : null, code: id > 99 ? 200 : 401 }，一键覆盖成功/失败分支
与 Jest Mock 协同构建可验证测试链路
Mock.js 负责“数据层”，Jest.fn() 负责“调用层”，二者配合才能验全链路：
- 在组件测试中，先用
jest.mock('axios')拦截请求，再用mockResolvedValueOnce({ data: Mock.mock(...) })注入 Mock.js 生成的结构化数据 - 断言时不仅检查返回值，还要验证调用参数：
expect(axios.get).toHaveBeenCalledWith('/api/user/123') - 对副作用函数做双重 mock：比如
localStorage.setItem用jest.fn()拦截，同时用Mock.mock('@datetime')生成一致的时间戳用于比对
工程化集成：从手动 mock 到自动契约同步
专家级落地必然脱离“手写 mock 规则”阶段：
- 把 Swagger/OpenAPI 文档转成 Mock.js 模板脚本，实现接口变更 → mock 自动更新
- 在 vite/webpack 插件中注入
Mock.setup({ timeout: '100-300' })和跨域头，让本地开发环境无限接近真实网关 - 用 TypeScript 接口定义 +
Mock.mock<apiresponse>(...)</apiresponse>类型断言，确保模拟数据结构与类型定义严格一致
不复杂，但需要把每一步都当成真实后端来设计——数据有 schema、请求有逻辑、错误有依据、协作有契约。这才是 Mock 的专家级内核。
