JS 中怎么用 Jest 对包含 fetch 和 WebSocket 的异步模块进行单元测试-js教程-PHP中文网

Jest 测试含 fetch 和 WebSocket 的异步模块需隔离依赖、控制异步流、模拟响应：mock fetch 返回 Response，mock WebSocket 并触发事件，每次测试后清理 mock，组合测试时按序模拟依赖并验证状态流转与错误处理。

js 中怎么用 jest 对包含 fetch 和 websocket 的异步模块进行单元测试

用 Jest 测试含 fetch 和 WebSocket 的异步模块，核心是**隔离外部依赖、控制异步流、模拟响应行为**。Jest 自带的 jest.mock() 和 mockImplementation() 能覆盖大部分场景，无需额外库（如 msw 或 websocket-mock）也能完成可靠测试。

模拟 fetch 请求（替代原生 window.fetch）

Jest 默认会自动 mock 全局 fetch，但需手动配置返回值。关键是：确保被测函数实际调用的是 mock 版本，并能验证请求参数与响应逻辑。

在测试前用 global.fetch = jest.fn() 显式 mock（尤其在非浏览器环境如 Node 中）
用 mockResolvedValue 返回 Promise 包裹的 Response 对象，注意构造合法的 Response（可用 new Response(body, options)）
验证请求是否按预期发起：expect(fetch).toHaveBeenCalledWith(url, config)

示例：

test('fetches user data', async () => {
  const mockData = { id: 1, name: 'Alice' };
  global.fetch.mockResolvedValue(new Response(JSON.stringify(mockData), { status: 200 }));

  const result = await getUser(1); // 假设这是被测函数

  expect(fetch).toHaveBeenCalledWith('https://api.example.com/users/1');
  expect(result).toEqual(mockData);
});

模拟 WebSocket 行为（拦截 new WebSocket 构造与事件触发）

WebSocket 是事件驱动对象，不能只 mock 构造函数，还需模拟其 onopen、onmessage 等回调触发时机。常用做法是：mock WebSocket 构造函数，返回一个带可控事件触发能力的假实例。

用 jest.mock('ws')（Node）或 global.WebSocket = jest.fn()（浏览器环境）拦截构造调用
让 mock 实例保存传入的 onmessage 等 handler，并提供 triggerMessage(data) 方法主动调用它们
在测试中等待消息处理完成（配合 await waitFor(() => expect(...).toBe(...)) 或 Promise + resolve）

示例（简化版 mock）：

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

class MockWebSocket {
  constructor(url) {
    this.url = url;
    this.onopen = null;
    this.onmessage = null;
  }
  triggerOpen() { if (this.onopen) this.onopen(); }
  triggerMessage(data) { if (this.onmessage) this.onmessage({ data }); }
}

global.WebSocket = MockWebSocket;

test('handles incoming WebSocket message', async () => {
  const ws = new WebSocket('ws://localhost');
  ws.triggerOpen();
  ws.triggerMessage('{"type":"ping"}');
  // 断言业务逻辑是否响应了该消息
});