尝试渲染全局组件时集成测试失败答案

【问题标题】：Integration test failing when trying to render a global component尝试渲染全局组件时集成测试失败
【发布时间】：2021-04-08 13:05:43
【问题描述】：

我写测试已经有一段时间了。今天偶然发现一个有趣的问题。我创建了一个全局模态（对话框）组件<GeneralModal />，它在App root中呈现：.

我在整个应用程序中有各种点击处理程序，它们触发了 redux 状态更新，并且根据该组件将从应用程序根目录呈现和显示的状态。

失败的测试（返回 null 而不是预期的结果）如下所示：

test('open general modal', async () => {
    render(<ItemsOverview />);
    const [getRow] = await screen.findAllByTestId('table-row');

    const testBtn = within(getRow).getByRole('button', {
      name: /edit/i
    });
    userEvent.click(tamperBtn);
  
    await waitFor(()=> {
      expect(screen.queryByRole('dialog')).toBeInTheDocument();
    }, {timeout: 10000})
 });

当我将<GeneralModal /> 插入<ItemsOverview /> 而不是应用程序根 时成功，否则失败。

我想知道是否有人可以为我指出正确的方向（我做错了什么吗？）如何解决这个问题。

【问题讨论】：

标签： reactjs jestjs react-testing-library

【解决方案1】：

好的，所以我发现了问题。当使用 redux 和 context 等时，你需要用它包装渲染函数并将渲染的组件作为 {children}

我忘了在这种情况下添加到包装器中，所以它当然不会起作用！

  const AllTheProviders = ({ children }) => (
  <Provider store={store}>
    <QueryClientProvider client={queryClient}>
      <ConnectedRouter history={history}>
        {children}
      </ConnectedRouter>
    </QueryClientProvider>
  </Provider>
);

【讨论】：