异步与副作用测试，JavaScript单元测试全攻略

本文深入探讨了如何编写可靠、可重复的 JavaScript 单元测试，重点攻克异步逻辑（如 API 调用、Promise 链）和副作用（如 fetch 请求、事件上报、定时器）这两大测试难点；通过 async/await 精确控制执行时序、jest.mock/spyOn 等工具彻底隔离外部依赖、rejects 断言覆盖错误路径，并结合行为验证与快照确保副作用真实触发——让你告别“测试通过但线上出错”的尴尬，真正实现测试即文档、测试即保障。

编写可靠的 JavaScript 单元测试来覆盖异步代码和副作用，关键在于控制异步流程、隔离外部依赖并验证行为一致性。重点是使用合适的工具模拟副作用，并正确等待异步操作完成。

理解异步测试的基本机制

JavaScript 中的异步代码通常涉及 Promise、async/await 或回调函数。测试时必须确保测试框架等待异步逻辑执行完毕再做断言。

使用 Jest 或 Mocha 等主流测试框架时，可以通过返回 Promise 或使用 async/await 来处理异步逻辑：

• 在测试函数中使用 async 关键字，并用 await 等待异步调用
• 如果不用 await，需显式返回 Promise
• 避免使用超时或轮询方式“猜测”异步完成时间

示例：

test('fetches data successfully', async () => {
  const data = await fetchData();
  expect(data).toEqual({ id: 1 });
});

使用 Mock 隔离副作用

副作用（如 API 调用、文件读写、定时器）会使测试不可靠且变慢。通过 mock 技术替换真实行为，可以精确控制输入并验证输出。

常见做法包括：

• 用 jest.spyOn 或 vi.spyOn 监视函数调用
• 用 jest.mock 模拟模块（如 axios、fs）
• mock 全局对象如 fetch 或 setTimeout

例如 mock 一个 API 请求：

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ id: 1 }),
  })
);

await api.getUser(1);
expect(fetch).toHaveBeenCalledWith('/api/users/1');

测试错误路径与异常处理

可靠的测试不仅要覆盖正常流程，还要验证错误处理是否正确。对于异步代码，需测试被拒绝的 Promise 和 try/catch 行为。

技巧包括：

• 让 mock 的 API 返回 Promise.reject
• 使用 await expect(...).rejects.toThrow() 断言异常
• 确保 catch 块中的逻辑被执行并产生预期结果

示例：

test('handles network error', async () => {
  fetch.mockRejectedValue(new Error('Network failed'));

  await expect(api.getData()).rejects.toThrow('Network failed');
});

快照与行为验证结合使用

对于有副作用的函数（如更新 DOM、调用第三方服务），不要只测返回值，还要验证其行为是否符合预期。

推荐做法：

• 用 mock 函数检查是否被调用、调用次数及参数
• 对复杂结构输出使用快照测试（如 React 组件渲染）
• 避免将快照用于动态数据（如时间戳），必要时进行清洗

例如验证事件上报：

const trackEvent = jest.fn();
analytics.track('login', trackEvent);
expect(trackEvent).toHaveBeenCalledWith('user_login');

基本上就这些。核心是让测试可重复、不依赖外部状态，并明确表达意图。只要合理使用 async/await、mock 和行为断言，异步和副作用代码也能被充分覆盖。

好了，本文到此结束，带大家了解了《异步与副作用测试，JavaScript单元测试全攻略》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！