CODEWITHSUNDEEP
react-testing-library
Sam Selikoff
Sam Selikoff

Reputation: 12694

waitForElementToBeRemoved is timing out when passed an element

I'm trying to use waitForElementToBeRemoved with just an element but Jest is timing out. When I pass in a function, it works.

My understanding from this feature was that it should be able to take an element: https://github.com/testing-library/dom-testing-library/pull/460

I verified my app is using @testing-library/[email protected].

Here's the code:

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

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

Any idea what I'm doing wrong?

Upvotes: 22

Views: 32213

Answers (2)

Alex G.
Alex G.

Reputation: 492

Recently I faced the same issue with React Testing Library, and the reason is the version of the library. By default create-react-app installing outdated version of @testing-library.
Here solution for React Testing Library:
Run CLI command npm outdated and check the versions of dependencies:

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

To update dependencies open package.json and manually update them to the latest:

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

Save changes and run CLI command: npm install

In case DOM Testing Library use the same steps for "@testing-library/dom"

Upvotes: 9

Alex G.
Alex G.

Reputation: 492

And in addition to my previous answer, I would suggest to use queryByText:

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

rather than getByText:

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

see Common mistakes with React Testing Library

Upvotes: 18

Related Questions