Jest React测试库中fireEvent.click无法等待异步函数致测试失败

解决方案 #

核心问题分析

1. mock未返回Promise：mockImplementation()默认返回undefined，而myAsyncAction中的await需要等待Promise才能触发异步流程，导致fetchSomething从未被正确调用。
2. 组件拼写错误：按钮的onClick绑定了handleOnCLick（多了一个大写L），实际函数名为handleOnClick，这会导致点击事件根本无法触发目标函数。

修正步骤

1. 修复组件拼写错误：
   修正按钮的事件绑定：

   return <button onClick={handleOnClick}> CLICK ME </button>
   

2. 让mock返回resolved Promise：
   使用mockResolvedValue替代mockImplementation()，确保异步函数返回合法的Promise：

   const spyFetchSomething = jest.spyOn(Requests, "fetchSomething").mockResolvedValue({}); // 可传入测试所需的模拟数据
   

3. 最终可用的测试代码：

   import * as Requests from "../requests"
   
   test('should trigger some async function', async () => {
     const spyFetchSomething = jest.spyOn(Requests, "fetchSomething").mockResolvedValue({});
     render(<Example />);
     fireEvent.click(screen.getByRole("button"));
     await waitFor(() => {
       expect(spyFetchSomething).toHaveBeenCalled();
     });
   });
   

可选优化：让点击函数返回Promise

如果希望测试逻辑更直观，可以修改handleOnClick返回Promise，这样测试中可以直接等待点击操作完成：

const handleOnClick = () => {
  return myAsyncAction();
}

测试代码可简化为：

await fireEvent.click(screen.getByRole("button"));
expect(spyFetchSomething).toHaveBeenCalled();

内容的提问来源于stack exchange，提问作者Fabio Ribeiro de Carvalho