waitForElementToBeRemoved 在传递元素时超时

Question

我正在尝试将 waitForElementToBeRemoved 与一个元素一起使用，但 Jest 超时。当我传入一个函数时，它起作用了。

我对这个特性的理解是应该可以取一个元素：https://github.com/testing-library/dom-testing-library/pull/460

我确认我的应用程序正在使用@testing-library/dom@7.8.0.

代码如下：

// doesn't work
await waitForElementToBeRemoved(screen.getByText("Loading..."));

// works
await waitForElementToBeRemoved(() => screen.getByText("Loading..."));

知道我做错了什么吗？

Answer 1

最近我在 React Testing Library 遇到了同样的问题，原因是库的版本。默认情况下 create-react-app 安装 @testing-library.
的过时版本 React 测试库 的解决方案：
运行 CLI 命令npm outdated 并检查依赖项的版本：

Package                      Current  Wanted  Latest
@testing-library/jest-dom      4.2.4   4.2.4  5.11.4
@testing-library/react         9.5.0   9.5.0  11.0.2
@testing-library/user-event    7.2.1   7.2.1  12.1.4

要更新依赖项，请打开 package.json 并手动将它们更新到最新版本：

  ...
  "dependencies": {
    ...
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.0.2",
    "@testing-library/user-event": "^12.1.4"
    ...
  },
  ...

保存更改并运行 CLI 命令：npm install

如果 DOM 测试库 对“@testing-library/dom”使用相同的步骤

Answer 2

除了我之前的回答，我建议使用 queryByText:

await waitForElementToBeRemoved(screen.queryByText("Loading..."));

而不是getByText：

await waitForElementToBeRemoved(screen.getByText("Loading..."));

见Common mistakes with React Testing Library

waitForElementToBeRemoved 在传递元素时超时

waitForElementToBeRemoved is timing out when passed an element

react-testing-library