reactjs React testing-library确保在进行新的act()调用之前等待以前的act()调用

gupuwyp2  于 2023-03-12  发布在  React
关注(0)|答案(2)|浏览(157)

我为一个选项写了一个测试,然后我得到了这个警告。在我的测试中,我在等待行为的结束。为什么我得到这个错误?
警告:您似乎有重叠的act()调用,这是不支持的。请确保等待以前的act()调用,然后再进行新的调用。

test('Selection should be have the correct number of options', async () => {
  const leftClick = { button: 0 };
  const { options } = makeSUT();
  const selection = screen.getByLabelText('MultiSelection');

  // open all option
  act(() => {
    userEvent.click(selection, leftClick);
  });
  // await wait();

  options.forEach(async (option, index) => {
    if (index === 0) {
      expect((await screen.findAllByText(option.label)).length).toEqual(1);
    } else {
      expect((await screen.findAllByText(option.label)).length).toEqual(1);
    }
  });
});

谢谢

axzmvihb

axzmvihb1#

userEvent实用程序API方法不应 Package 在act()中。建议不要在此处 Package 。相反,您可以只 Package 方法调用。执行操作后,可以使用waitFor等待组件状态更新并运行Assert。要简化逻辑,我会用waitForgetBy替换findBy,这样你就不必用async替换你的forEach()
应确保正确设置userEvent(请参见here
以下操作应该可以解决您的问题:

test('Selection should be have the correct number of options', async () => {
    const user = userEvent.setup(); // Make sure to setup correctly.
    const leftClick = { button: 0 };
    const { options } = makeSUT();
    const selection = screen.getByLabelText('MultiSelection');
    
    // Wait for the userEvent to click:
    await user.click(selection, leftClick);
    waitFor(() => {
        options.forEach((option, index) => {
            if (index === 0) {
                expect((screen.getAllByText(option.label)).length).toEqual(1);
            } else {
                expect((screen.getAllByText(option.label)).length).toEqual(1);
            }
        });
    });
});
8zzbczxx

8zzbczxx2#

你不应该把userEvent.click Package 在act中,你只需要把点击的效果 Package 在waitFor中就可以了。
我做了一些小的改动,这样我们就有了一个可读性很强的测试:

  • 左击是默认的,所以我们不需要指定它。
  • getByText返回与文本匹配的一个元素,因此您不需要获取所有元素并检查是否只有一个元素。
  • 我们没有在forEach中使用index参数,所以我们也可以删除它。
test('Selection should be have the correct number of options', async () => {
  const { options } = makeSUT();

  const selection = screen.getByLabelText('MultiSelection');
  userEvent.click(selection);

  await waitFor(() => {
    options.forEach((option) => screen.getByText(option.label);
  });
});

相关问题