javascript - React 测试库 waitForElementToBeRemoved 无法正常工作

Question

在我的 React 应用程序中，我在屏幕上有一个按钮，点击它后，屏幕上的特定元素就会消失。通过单击按钮，状态将发生变化，在重新渲染组件后，该元素将消失。

为了测试这个场景，我使用了 React 测试库。它不能通过 waitForElementToBeRemoved 真正起作用:

//element to hide
const listContainer = screen.getByRole('list'); 

//Toggle button
 const queryButton = screen.getByRole('button', {
    name: 'Query',
  })

userEvent.click(queryButton); 

//this line get error: Exceeded timeout of 20000 ms for a test.
await waitForElementToBeRemoved(() => listContainer);

但是当我改变等待过程时它起作用了:

await waitFor(() => {
    expect(listContainer).not.toBeInTheDocument();
});

我不明白为什么。谁能帮帮我？

Answer 1

更改您的测试以使用:

//Toggle button
const queryButton = screen.getByRole('button', {
 name: 'Query',
})

userEvent.click(queryButton); 

// Use queryByRole instead of getByRole
await waitForElementToBeRemoved(() => screen.queryByRole('list'));

这应该可以作为 queryByRole 在找不到项目时返回 null 而不是错误。 waitFor 在重试时工作，直到包装函数停止抛出错误(这是 getByRole 在未找到元素时所做的)。如果 queryByRole 更改仍然不适合您，您还可以尝试增加超时，例如await waitForElementToBeRemoved(() => screen.queryByRole('list'), {timeout: 3000);

有关 waitForElementToBeRemoved 和 waitFor 之间区别的更多信息，请参见 here .另请查看 this文章建议仅在需要检查元素是否存在时使用 queryBy...。