Test based on `findByText` assertion fails after 551ms, despite default timeout being 1000ms

[jgarplind]

• @testing-library/react version: 16.3.0
• Testing Framework and version: Vitest 3.2.4
• DOM Environment: jsdom 26.1.0

Relevant code or config:

expect(
  await screen.findByText(
    "text which is supposed to be found after loading state is passed",
  ),
).toBeInTheDocument();

What you did:

Ran a test which failed on this assertion. Only sometimes. Typically in CI (Github Actions).

What happened:

× path/to/my.test.tsx > x > shows expected content 551ms
→ expect(element).toBeInTheDocument()
element could not be found in the document
⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯
FAIL path/to/my.test.tsx > x > shows expected content
Error: expect(element).toBeInTheDocument()
element could not be found in the document

Reproduction:

Does not reproduce easily. Is flaky. Trying to understand if there is some misunderstanding in how things are supposed to work.

Problem description:

When running a test based on findBy, we sometimes find them to be flaky. It is sometimes resolved by using waitForElementToBeRemoved on the previous state, but that just adds another possible race condition, and also tends to be flaky.

I expect the test to run for at least 1000ms (as per findBy logic documented here), but sometimes find that the test fails much sooner (after 551 ms in the example above).

Suggested solution:

I'm trying to deduce a cause here for further investigation.

• Is findBy resolving sooner than expected? If yes, it seems like a problem internal to the library, possibly Flaky tests: Asynchronous queries can return unmounted elements #865?
• Is the (vitest) reported time unreliable, and we may have hit the 1000ms timeout despite 551ms being reported? If so, maybe extending the default timeout could be beneficial, even though hundreds of similar tests tend to pass every time, so it seems odd.

Overall, this seems like a strange problem, and I'm not expecting a straight-forward fix, but would like you to know about it, and would be grateful for any pointers on how to analyze further.

[rothsandro]

I have the same problem, a test is flaky on the CI and fails after ~100ms even if asyncUtilTimeout is set to 5s. In my case it's very likely caused by our horrible component library (which is written in vanilla JS and just has a simple React wrapper), which creates DOM elements, add them to the document, removes them from the document, and adds them again. Not sure if that's the case for you too. Here's what I found out:

---

If findBy would not find the element at all, the test would take at least 1s (default timeout) and the error message would be "Unable to find an element with text ...". That's this scenario:

const demo = document.createElement("div");
demo.innerText = "Demo";

// demo is never added to the DOM

expect(await screen.findByText("Demo")).toBeInTheDocument();

However, your error message states that findBy actually found the element but when the toBeInTheDocument assertion runs, it's no longer in the document. If we add the element to the document, queue a microtask to remove it and then use findBy to find the element, we get this exact error and the test fails faster than the findBy timeout.

const demo = document.createElement("div");
demo.innerText = "Demo";
document.body.appendChild(demo);

queueMicrotask(() => document.body.removeChild(demo));

expect(await screen.findByText("Demo")).toBeInTheDocument();

Using waitFor + getByText as a workaround may solve the problem (I'll see in the next few days if the test is still flaky). This will find the element and immediately check if it's in the document, before it could be removed from the DOM.

await waitFor(() => expect(screen.getByText("Demo")).toBeInTheDocument());