Mock核心是用可控假数据替代真实依赖，重点在于明确动机（接口未就绪、防脏数据、覆盖异常、测试隔离）、对象（HTTP请求、模块、定时器、全局API）、方法（msw/nock、jest.mock、手动注入、假数据工具）及边界（验证逻辑、及时清理、避免过度、贴近真实）。
JS 中 Mock 模拟的核心，本质是“用可控的假数据替代真实依赖”，重点不在画图本身，而在理清 为什么 Mock、Mock 什么、怎么 Mock、边界在哪。思维导图只是梳理过程的工具，不是目标。下面按实际开发逻辑分层展开，方便你直接转化为导图节点：
一、为什么需要 Mock（动机层）
• 真实接口未就绪（后端延迟、联调未开始）
• 避免调用生产/测试环境造成脏数据或费用
• 覆盖异常场景（如 404、超时、空数组、字段缺失），真实环境难稳定复现
• 单元测试隔离性要求：不依赖网络、数据库等外部系统
二、Mock 什么（对象层）
• HTTP 请求：fetch / axios / XMLHttpRequest 的响应（状态码、headers、body）
• 模块依赖：用 jest.mock() 或手动替换 import 的函数/类（如 mock Date.now()、mock localStorage）
• 定时器：jest.useFakeTimers() 控制 setTimeout/setInterval 执行时机
• 全局变量或浏览器 API：如 window.navigator、document.cookie、CanvasRenderingContext2D
三、怎么 Mock（技术层）
• 请求层面：
– 浏览器端：msw（Mock Service Worker）——拦截真实请求，返回预设响应（推荐，贴近真实网络）
– Node.js 端：nock（拦截 http/https 请求）或 jest-fetch-mock（mock global.fetch）
• 模块层面：
– Jest 内置：jest.mock('path') + mockImplementation / mockReturnValueOnce
– 手动注入：函数参数传入依赖，测试时传入 mock 函数（更易测，推荐）
• 数据构造：使用 factory-girl、casual、Faker.js 快速生成结构化假数据（避免硬编码）
四、关键注意事项（避坑层）
• Mock 不等于“绕过逻辑”——要验证被测代码对不同响应的处理是否正确（比如 loading → success/error 的状态流转）
• 清理需及时：test 结束后 restore mocks（jest.restoreAllMocks()）或重置 timers（jest.runOnlyPendingTimers()）
• 避免过度 Mock：只 mock 直接依赖，不 mock 依赖的依赖（否则测试脆弱）
• Mock 数据应贴近真实：字段名、嵌套结构、类型（null/undefined/空字符串）都要覆盖，否则上线仍可能报错
画导图时，建议以“Mock 目标”为中心，四个主分支对应上述四层，每层用关键词+短说明展开，避免大段文字。节点之间保持逻辑递进，比如“为什么 Mock”引出“Mock 什么”，再导向“怎么实现”。不复杂但容易忽略。
