何时在带有react-dom的jest单元测试中使用act()

Question

根据反应单元测试文档：

行为（）

要为断言准备组件，请将呈现该组件并在 act() 调用内执行更新的代码包装起来。这使得您的测试运行更接近 React 在浏览器中的工作方式。

但测试在这两种情况下都运行得很好：

没有 act()

it('Should return some text', () => {
  render(<TestComponent />, container);
  expect(container.textContent).toBe('some text');
});

与行为（）

it('Should return some text', () => {
  act(() => {
    render(<TestComponent />, container);
  });

  expect(container.textContent).toBe('some text');
})

问题是：act() 到底有什么作用，什么时候应该使用它？

Answer 1

简单来说：

ReactTestUtil确保act()其中可能需要时间的任何事情（渲染、用户事件、数据获取）在运行测试断言之前完成。

act(() => {
    // render components
    });
    // make assertions

如果您使用的是像React测试库这样的库，那么像render函数这样的东西已经被包装在 中act()，并且您通常不需要显式地使用它。

请注意，React 测试库确实有自己的act()函数，它只是ReactTestUtils的包装器act()。这在异步状态更新中可能很有用，尽管其他 React 测试库工具waitFor可能更好。

Answer 2

来自act()文档：

在编写 UI 测试时，渲染、用户事件或数据获取等任务可以被视为与用户界面交互的“单元”。React 提供了一个名为 act() 的帮助器，它确保在您做出任何断言之前，与这些“单元”相关的所有更新都已被处理并应用于 DOM

进一步阅读和示例：https : //github.com/mrdulin/react-act-examples/blob/master/sync.md