使用Jest模拟默认导出函数时提示未调用但实际已调用的问题

咱们来一步步拆解这个问题，以及为什么你的解决方案能生效：

1. 异步生命周期的执行时机坑点 #

传统的componentWillMount是同步执行的——调用Enzyme.shallow()后，React会立刻走完这个同步生命周期，你后续的断言能准确捕获到函数调用。但当你把它改成异步方法（里面用了await文件系统操作），情况就变了：

• 异步代码会被放到JavaScript的事件队列里，不会在shallow()调用的同步阶段执行完毕。
• 这时候你如果直接在shallow()之后写断言，断言会先于componentWillMount里的异步函数调用执行，Jest自然会判定“函数未被调用”，但实际上只是调用时机比断言晚而已。

2. 为什么async/await能解决问题 #

当你把beforeEach改成异步函数，并且在Enzyme.shallow()前加上await，本质上是让测试代码等待当前事件队列里的异步任务完成，再执行后续的断言：

• 虽然shallow()本身不返回Promise，但await会触发JavaScript的事件循环推进，让componentWillMount里的异步逻辑有机会执行完毕。
• 这样一来，当你执行断言的时候，被模拟的函数已经被调用了，测试自然能通过。

额外的最佳实践建议 #

为了让异步测试更可靠，还有几个小技巧可以参考：

• 尽量避免用componentWillMount做异步操作：React 16.3+已经把这个钩子标记为UNSAFE_componentWillMount，官方推荐把异步初始化逻辑放到componentDidMount里，这个钩子的异步行为更易预测。
• 更精准地等待异步逻辑：如果你的组件异步逻辑有明确的Promise返回，可以直接等待这个Promise，比如：

  beforeEach(async () => {
    const wrapper = Enzyme.shallow(<YourComponent />);
    // 手动等待组件的异步生命周期完成
    await wrapper.instance().componentWillMount();
  });
  

• 用Jest的waitFor做异步断言：如果异步逻辑的执行时机不确定，waitFor会反复检查断言条件，直到满足或超时：

  await waitFor(() => {
    expect(yourMockedFunction).toHaveBeenCalled();
  });
  

内容的提问来源于stack exchange，提问作者Andreas Andreou