1. 21
    Use the waitForElementToBeRemoved Async Util to Await Until an Element Disappears
    1m 9s

Use the waitForElementToBeRemoved Async Util to Await Until an Element Disappears

Daniel Afonso
InstructorDaniel Afonso
Share this video with your friends

Social Share Links

Send Tweet
Published a year ago
Updated a year ago

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.

egghead
egghead
~ 19 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today