测试 React：“不要等待使用同步逻辑调用 act(...) 的结果”

Question

使用 react 和 react-dom 16.9.0

我在测试 React 钩子时收到此警告：

console.error node_modules/react-dom/cjs/react-dom-test-utils.development.js:80
Warning: Do not await the result of calling act(...) with sync logic, it is not a Promise.

我的测试代码（在@testing-library/react 中使用 jest）

...
await act( () => {
  rerender(
    <HookTester
      promise={asyncFunction}
      initialValue={'extra loading...'}
    />
  );
});

expect(asyncFunction).toHaveBeenCalledTimes(2);
...

但如果我不等待，那么我的expectation 就太早了。

Answer 1

哦！我知道了！

事实证明，文档提到了这样的同步函数：

act( () => {
  // ... some 'sync logic'
});

你不能等待。

但是你当然可以等待一个异步函数：

await act( async () => {
  // ... some 'async logic'
});

这为我解决了问题。