reactjs - 在 Jest : NavigationContainer causes console error 中异步测试 React Navigation 5

Question

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

到现在为止还挺好。这里的关键基本上是将您的测试包装在 NavigationContainer 中。所以我的组件可以访问以前来自 react-navigation-hooks 的那些钩子(Hook)。 .

当我的测试是同步的时，这很好用，但只要我添加 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是解构 useLinking 的返回值的结果在 (43-47) 之前调用一些行。无需进一步详细说明， getInitialState被包裹在一个 promise 里面，所以它变成了“thenable”。

现在，如果我取消注释 useThenable ，控制台错误消失。但显然这不是我可以从这个文件之外轻松实现的。所以我有点卡在这里，因为我不知道如何以异步方式编写我的测试代码而不会一直遇到这个错误，而且我也不觉得忽略或抑制它是一个好主意。

任何帮助，将不胜感激。

Answer 1

调用 render 后我的建议来自 react-native-testing-library对于执行异步工作的组件，useEffect (充当 componentDidMount )，更改状态等:

await act(async () => {})

甚至:

await act(async () => await flushMicrotasksQueue())

如果你有一些超时。