Use the waitForElementToBeRemoved Async Util to Await Until an Element Disappears
Sometimes, you might need to wait for an element to disappear from your UI before proceeding with your test setup or making your assertion.
In this lesson, we will learn about a wrapper around the waitFor that allows you to wait until an element is removed from your UI: the waitForElementToBeRemoved.
Instructor: [0:00] One of the async utils that can be helpful is the waitForElement to be removed. This is a wrapper over the waitForUtil that allows you to check if a DOM element has been removed. Looking at our component, we have this loading test indicator that will disappear after our setTimeout up here sets our showText to be true.
[0:18] In our test file, let us start by rendering our component. After rendering, we need to wait for our loadingText element to be removed. Let's import the waitForElement to be removed from the testing library and call it. This util is asynchronous, so we need to change our test to be async and wait for it.
[0:36] Inside util, it expects to receive the element that will disappear from the UI. Let us pass a callback that leverages the queryByText query to getTheLoadingText element. What this block of code will do is loop this expression until it no longer finds this element in our UI.
[0:51] Therefore, if we now know that our loadingText has disappeared, then we know that our loaderText has shown up already. We can query for it using a getByText query instead of the findBy query like we did in the findBy lesson. Now, if we assert that our text is in the document and run our test, we should see that it has passed.