waitForElementToBeRemoved throws error when passed an element

What you did:

Wrote a test with await waitForElementToBeRemoved(screen.queryByText("Loading..."));

What happened:

Got a failing test Timed out in waitForElementToBeRemoved.

Reproduction:

https://codesandbox.io/s/testing-userevent-the-proper-way-forked-mx356?file=/src/App.test.js

Problem description:

As far as I can see, waitForElementToBeRemoved accepts either a function or an element. I’d expect those to work identically. However, await waitForElementToBeRemoved(() => screen.queryByText("Loading...")); works, while await waitForElementToBeRemoved(screen.queryByText("Loading...")); does not work.

[eps1lon]

Closing since this is expected behavior. The element isn’t removed but it’s original query is no longer matching.

You probably want to waitFor screen.queryByText("Loading...") no longer returning an element.

[AriPerkkio]

The element passed to waitForElementToBeRemoved is not unmounted. React is only replacing its textContent or the text node inside it.

Refactor code to make current test pass:

  return (
    <>
-      {isLoading && "Loading..."}
+      {isLoading && (<div>Loading...</div>)}
      <div>{title}</div>
    </>
  );

Now the element will actually unmount.

When passing a callback to waitForElementToBeRemoved it is called repeatedly until it throws. That’s why the other solution is currently passing the test.