[Unit testing - React] 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.

 

import { render, screen, waitForElementToBeRemoved } from "@testing-library/react"

describe("App test", () => {
   it("expects loading text to disappear after loading", async () => {
      render(<App />)
      await waitForElementToBeRemoved(() => screen.queryByText(/loading text/i)) 
      const text = screen.getByText(/hello there/i)
      expect(text).toBeInTheDocument()
   })
})