JavaScript Fetch API 中怎么在单元测试中优雅地 Mock 请求-js教程-PHP中文网

单元测试中 Mock Fetch API 应用 jest.spyOn(global, 'fetch').mockImplementation() 并在 afterEach 中 mockRestore()，返回 new Response() 构造合法响应，支持按 URL/参数差异化返回，且每次测试后必须清理。

javascript fetch api 中怎么在单元测试中优雅地 mock 请求

在单元测试中 Mock Fetch API，核心是替换全局 fetch 函数，让它返回可控的响应，而不是真正发网络请求。关键在于“不污染全局环境”“可复位”“支持多种响应场景”，而非简单地直接赋值 window.fetch = jest.fn()。

用 Jest.mock() 模拟全局 fetch（推荐）

Jest 提供了安全模拟全局函数的能力，避免手动覆盖和清理问题：

在测试文件顶部使用 jest.mock('node-fetch')（仅限 Node 环境）；但浏览器环境更常用的是直接 mock 全局 fetch
更通用的做法：在 beforeEach 中用 jest.spyOn(global, 'fetch').mockImplementation(...)，并在 afterEach 中调用 mockRestore() 复位

示例：

beforeEach(() => {
  global.fetch = jest.fn();
});

afterEach(() => {
  jest.clearAllMocks();
  // 或 global.fetch.mockRestore()，如果用了 spyOn
});

构造符合 Response 接口的 Mock 响应

Fetch 返回的是 Promise，Mock 时需返回合法的 Response 实例（或兼容对象），否则被测代码调用 .json()、.text() 会报错：

用 new Response(body, options) 构造真实响应（Jest 默认环境支持）
支持 JSON：new Response(JSON.stringify({ ok: true }), { status: 200 })
支持错误响应：new Response('Not Found', { status: 404 })
需要模拟网络失败？抛出异常：global.fetch.mockRejectedValue(new Error('Network error'))

按请求 URL 或参数差异化响应

多个测试用例可能依赖不同接口返回不同数据，可通过检查 fetch 调用参数实现条件响应：

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

在 mockImplementation 中读取第一个参数（URL）或第二个参数（options）

示例：

global.fetch = jest.fn((url, options) => {
  if (url.includes('/api/users')) {
    return Promise.resolve(new Response(JSON.stringify([{ id: 1, name: 'Alice' }])));
  }
  if (url === '/api/posts' && options?.method === 'POST') {
    return Promise.resolve(new Response(JSON.stringify({ id: 101 }), { status: 201 }));
  }
  return Promise.resolve(new Response('', { status: 404 }));
});