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

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

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

而不是getByText：

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

请参阅React 测试库的常见错误

Answer 2

最近我在使用React测试库时遇到了同样的问题，原因是库的版本。默认情况下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”使用相同的步骤