`waitForElementToBeRemoved` can time out even when the element has been removed from the `document`

• @testing-library/dom version: 8.11.2
• Testing Framework and version: jest@27.4.7
• DOM Environment: jsdom@16.7.0

Relevant code or config:

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

What you did:

Executed test

What happened:

Test fails with error Timed out in waitForElementToBeRemoved.

Reproduction:

Not sure how to dependably repro it, but when it occurs it seems to occur deterministically.

Problem description:

• Times out because parent.contains(element) always returns true.
• However, while debugging, I found that document.contains(element) and document.contains(parent) both return false.
• In other words, parent has been removed from the document, but dom-testing-library doesn't check against that.
• When this occurs, I can see that parent is of type HTMLDivElement. I would have expected it to be HTMLHtmlElement because of this while loop. Could it be that we have a race condition in which the element gets removed from the document prior to (or even during!) the execution of the while loop?

Suggested solution:

Just check if document.contains(element) rather than capturing the parent in the first place (of course, I assume there is a reason for not taking this simple approach).

Start with src/wait-for-element-to-be-removed.js, especially the parent traversal and removal check described in the issue. Reproduce the timeout with the provided waitForElementToBeRemoved call and inspect the document and parent containment states. Done means a regression test covers a removed parent and the wait no longer times out incorrectly.