CodePark/ questions / Async UI & act()
START PRACTICINGPRACTICE
Frontend question · Testing › Async UI & act()

The last line throws an error saying the element is already removed or was never present. Why?

render(<Profile />);
await screen.findByText("Ana");
await waitForElementToBeRemoved(() => screen.queryByText(/loading/i));
findByText already waited for the data, so the spinner is gone; waitForElementToBeRemoved requires the element to be present when it starts

findByText already waited for the data, so the spinner is already gone. waitForElementToBeRemoved throws at once if the element isn't there at the start. This stops you from waiting on something that never existed. Call it right after render, while the spinner still shows. Or simply assert with queryBy* after findByText. The option saying it only accepts elements is wrong, because it also accepts a callback.