在使用 setState 的组件上使用 testing-library findBy* 会导致“未包装在动作中”警告答案

【问题标题】：Using testing-library findBy* on a component that uses setState causes a "not wrapped in act" warning在使用 setState 的组件上使用 testing-library findBy* 会导致“未包装在动作中”警告
【发布时间】：2020-04-06 02:30:42
【问题描述】：

我有一个 React 组件，它使用 Promise 检索数据，然后在 Promise 解决时调用 setState。然后它使用更新后的状态来改变渲染的内容。

在测试这个时，我使用testing library 的findBy* methods 来等待渲染的组件使用来自 Promise 的内容进行更新：

await findByText("Failure details", { exact: false });

我的测试通过了——它们正确地等待组件重新渲染。但是，我在运行它们时会收到这样的警告（我正在使用 Jest，但我认为这无关紧要）：

Warning: An update to MyComponent inside a test was not wrapped in act(...).

Everything I've found online that's related 这要么是关于使用 useEffect 的组件，要么是关于在其中包括对 act 的显式调用的测试（我没有），我认为这里没有必要——我的测试本身并没有改变组件，除了它调用render。

简而言之，我的情况似乎比其他人写的更简单——我只是使用setState 和findBy* 查询，没有更复杂的。

这个问题有同样简单的解决方案吗？

【问题讨论】：

标签： reactjs react-hooks react-testing-library

【解决方案1】：

谢天谢地，解决方案很简单 - 将 React 和 React-DOM 升级到 >= 16.9.0。我不必更改我的测试或组件。

16.9.0 包括an asynchronous version of act。正如我所说，我不必明确使用它，但它显然是在幕后使用的，因为它解决了我的问题。

【讨论】：

按照此处所述解决此问题后，我实际上最终将调用setState 的组件代码包装在useEffect 挂钩中，以便我可以执行cleanup 而不是尝试设置状态在未安装的组件上。但这并不需要我对行为警告做任何进一步的事情，以上仍然足够。