单元测试中 mock fetch 的核心是替换全局 fetch 函数，常用方式包括手动 mock、jest 的 mockimplementation 或 jest-fetch-mock 库；需模拟响应、验证调用参数、清理 mock 并覆盖成功与错误分支。
在单元测试中 Mock fetch，核心是**替换全局的 fetch 函数实现**，让它不真正发请求，而是按预期返回模拟的响应数据。常用方式有手动 mock、Jest 自带的 mockImplementation，或借助 jest-fetch-mock 库。
用 Jest 手动 mock fetch
这是最直接的方式，适合简单场景。在测试文件顶部或 beforeEach 中重写 global.fetch：
- 用
jest.fn()创建 mock 函数，并指定返回一个Response对象（可用Promise.resolve(new Response(...))） -
Response构造函数支持传入字符串/JSON 字符串和{ status, headers }配置 - 记得在每个测试后清理 mock，避免影响其他测试（
jest.clearAllMocks()或fetch.mockReset()）
示例：
global.fetch = jest.fn(() =>Promise.resolve(new Response(JSON.stringify({ id: 1, name: 'test' }), {
status: 200,
headers: { 'Content-Type': 'application/json' }
}));
用 jest-fetch-mock 简化操作
这个库封装了常见场景，自动 mock 全局 fetch，并提供链式 API：
- 安装：
npm install --save-dev jest-fetch-mock - 在 Jest 配置或
setupFilesAfterEnv中启用：require('jest-fetch-mock').enableMocks() - 测试中可直接调用
fetch.mockResponse()、fetch.mockReject()或fetch.mockResponses()模拟多组返回
例如：fetch.mockResponse(JSON.stringify({ ok: true })) 就能让下一次 fetch 返回 200 + 该 JSON。
验证 fetch 是否被正确调用
Mock 后别忘了断言：不仅检查函数是否执行，还要确认 URL、method、headers、body 是否符合预期。
expect(fetch).toHaveBeenCalledTimes(1)expect(fetch).toHaveBeenCalledWith('https://api.example.com/users', { method: 'POST', ... })- 如果请求体是 JSON，注意它实际是字符串，断言时要
JSON.stringify对比或用JSON.parse解析后比较
处理依赖 fetch 的异步逻辑
被测函数通常是 async 的，测试也要用 async/await 或 return expect(...).resolves：
- 确保测试函数声明为
async，然后await被测函数调用 - 用
expect(result).toEqual(...)断言返回值，而不是直接断言 DOM 或状态（除非你也在测副作用） - 若函数内部有
try/catch处理错误，记得也 mock 一次失败响应（如fetch.mockReject(new Error('Network error'))）来覆盖错误分支
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
