mock未生效的典型症状是请求发至真实接口并报错,排查需确认mock是否被加载、匹配请求及是否被覆盖或绕过。

Mock 模块未生效,最典型的症状是:本该走 Mock 的请求却发到了真实接口,然后因跨域、404、500 或鉴权失败而报错。排查核心思路是——确认 Mock 是否被加载、是否匹配请求、是否被后续代码覆盖或绕过。
确认 Mock 文件是否被正确引入和执行
很多 Mock 不生效,是因为文件根本没运行。检查以下几点:
- Mock 文件(如 mock/index.js)是否在项目启动入口(如 main.js 或 setupTests.js)中被显式 import;仅放在目录里不会自动执行
- 如果是基于 jest 的单元测试,确保 setupFilesAfterEnv 或 setupFiles 配置了 Mock 入口,且路径正确(注意相对路径解析位置是 Jest 配置文件所在目录)
- 在 Mock 文件顶部加一句 console.log('Mock loaded'),启动时看控制台是否输出——没输出就说明根本没加载
验证请求 URL 和 Method 是否与 Mock 规则完全匹配
Mock 工具(如 msw、jest.mock、axios-mock-adapter)对 URL 匹配非常敏感:
-
URL 必须完全一致:包括协议(http/https)、域名(localhost:3000 vs 127.0.0.1:3000)、路径末尾斜杠(
/api/user≠/api/user/)、查询参数(?id=1默认不参与匹配,除非显式写进 mock handler) -
Method 大小写敏感:写成
'Get'或'GET '(带空格)都会不匹配,应统一用全大写字符串如'GET' - 使用 msw 时,打开浏览器 DevTools → Network → 查看实际发出的请求完整 URL 和 method,再对照
rest.get(...)的第一个参数逐字比对
检查是否被真实请求逻辑“绕过”Mock
常见绕过场景:
-
请求发生在 Mock 启动前:比如组件 useEffect 中立即发请求,而 Mock 是在组件挂载后才注册(尤其 msw 的
worker.start()异步),可改用waitFor或延迟触发请求 -
使用了不同实例的请求客户端:Mock 了默认
axios,但代码里用了新创建的axios.create()实例,需单独对其实例做 Mock -
ESM 动态导入或条件加载:Mock 在顶层 import,但真实请求模块是通过
import().then动态加载的,可能触发了两次模块初始化,导致 Mock 被忽略;可在动态 import 前确保 Mock 已就绪 -
服务端渲染(SSR)环境:Node.js 环境下 msw 不工作,jest 测试中若模拟 SSR 场景,需改用
jest.mock或适配 Node 的 Mock 方案
快速验证 Mock 是否生效的调试技巧
别只等报错,主动验证:
- 在 Mock handler 里加 console.log('Mock triggered', req.url.toString()),发起请求后看是否打印
- 用 msw 时访问
http://localhost:3000/__msw(开发模式下)查看已注册的 handlers 列表 - 临时把 Mock 返回改成一个明显特征值(如
{ data: 'MOCKED!!!' }),然后在组件中 console.log 响应,确认拿到的是 Mock 数据而非真实响应 - 禁用浏览器网络(Offline 模式)后仍能正常显示数据 → 说明 Mock 生效;若直接报错 → Mock 未接管请求
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











