reactjs - 等待多个元素被删除React测试库

Question

我有一个 React 应用程序，我在其中使用 jest 和 React 测试库进行单元测试。我有一个单元测试，我想测试 SomeComponent 在加载时不会呈现任何骨架。SomeComponent 在数据尚未加载时渲染骨架。问题是渲染了多个骨架，而 waitForElementToBeRemoved 仅需要一个 HTMLElement。

所以我想知道是否有办法waitForMultipleElementsToBeRemoved？

test("SomeComponent when loaded doesn't render any skeleton", async () => {
    render(
      <SomeComponent />,
    )

  const skeletons = screen.getAllByTestId("skeleton");
  await waitForElementToBeRemoved(skeletons);

  expect(
    screen.queryByTestId("skeleton") 
  ).not.toBeInTheDocument();
});

注意:

当只有一个骨架时，此测试按预期进行。

Answer 1

您可以:

await waitForElementToBeRemoved(() => screen.getAllByTestId("initLoader"));

或者根据您的情况:

await waitForElementToBeRemoved(() => skeletons);

我认为您只是错过了回调。否则你的代码就没有问题!