在Jest中异步测试React Navigation 5：NavigationContainer导致控制台错误

Question

我正在使用react-native-testing-library，并将react-navigation从4升级到5后，我按照以下说明进行操作：https://callstack.github.io/react-native-testing-library/docs/react-navigation升级了我的大部分测试套件。

到目前为止很好。关键是将测试包装在NavigationContainer中，这样我的组件就可以访问以前来自react-navigation-hooks的钩子。

当我的测试是同步的时，这很好用，但是一旦将async关键字添加到测试函数中，就会收到以下警告：

console.error
    Warning: An update to ForwardRef(NavigationContainer) inside a test was not wrapped in act(...).

    When testing, code that causes React state updates should be wrapped into act(...):

    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/docs/test-utils.html#act
        in ForwardRef(NavigationContainer)
[我有许多同步运行且成功的测试。但是在某些组件中，我确实运行了一些异步逻辑以获得所需的结果。

据我了解，我应该将所有异步代码包装在act调用中。但是，即使在这种情况下，我也无法摆脱这个错误。

---

我继续尝试缩小问题范围。现在，我要做的就是渲染包裹的组件，如下所示：

test('a simple test', async () => {
  const component = (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );

  const {queryByText} = render(component);
  expect(queryByText('test')).toBeNull();
});
而且我仍然遇到相同的问题。请注意，实际测试成功了，只是我仍然遇到此控制台错误。

接下来，我尝试将render调用包装在act和waitForElement中，因为这是我在运行异步逻辑时应该做的。但是似乎这里的异步代码在渲染发生后执行。

因此，我继续研究NavigationContainer的哪一部分负责触发负责该错误的异步逻辑，并且似乎这段代码（第49-51行）做了一些有趣的事情：

const [isReady, initialState = rest.initialState] = useThenable(
  getInitialState
);

getInitialState是解构[43-47）前几行的useLinking调用的返回值的结果。无需赘述，getInitialState被包装在其中的一个promise中，因此它变为“ thenable”。
现在，如果我取消对useThenable的注释，控制台错误将消失。但这显然不是我可以从此文件之外轻松实现的。所以我有点卡在这里，因为我不知道如何一直以异步方式编写测试代码而又不会一直遇到此错误，而且我也不希望忽略或抑制它是一个好主意。 

任何帮助将不胜感激。

我正在使用react-native-testing-library，并将react-navigation从4升级到5后，我遵循以下说明：https://callstack.github.io/react-native-testing-library/docs/react -navigation ...

Answer 1

我对从render调用react-native-testing-library的组件执行异步工作，useEffect（充当componentDidMount），更改状态等的建议：

await act(async () => {})