@testing-library/dom version: 7.26.6
node version: 14.3.0
Relevant code or config:
it("Causes a big delay", async () => {
// This fires a fetch request that is mocked using MSW (so it should be near instant)
userEvent.click(screen.getByRole("button", { name: "Search"}));
await waitFor(() => {
//super fast call
//screen.getByText("some_link_text");
// causes massive delays
screen.getByRole("link", { name: "some_link" });
});
});
What you did:
Running this test causes the fetch request promise to resolve a lot longer than usual (around 1.5 - 2s). I initially investigated this by wrapping console.time around the request.

I also had an additional test which looks very similar to the above, but instead of using getByRole it was using getByText to search for some text. That test took a fraction of the time:

What happened:
After changing getByRole to getByText or inserting a getByText query before the getByRole it resolved much faster. My working theory is that getByRole is so expensive that it was monopolising the waitFor loop and takes a long time to relinquish control to the pending promise that needs to resolve.
@testing-library/domversion: 7.26.6nodeversion: 14.3.0Relevant code or config:
What you did:
Running this test causes the fetch request promise to resolve a lot longer than usual (around 1.5 - 2s). I initially investigated this by wrapping
console.timearound the request.I also had an additional test which looks very similar to the above, but instead of using
getByRoleit was usinggetByTextto search for some text. That test took a fraction of the time:What happened:
After changing
getByRoletogetByTextor inserting agetByTextquery before thegetByRoleit resolved much faster. My working theory is thatgetByRoleis so expensive that it was monopolising thewaitForloop and takes a long time to relinquish control to the pending promise that needs to resolve.