feat: Improve performance of findBy*/findAllBy* by not generating informative error messages

[timjb]

What: Improve performance of findBy/findAllBy by not generating informative error messages in the function passed to waitFor. The work of generating these error messages almost entirely wasted because all of them, except possibly the last one (if the test is red), will be discarded by waitFor. Instead, if the call to waitFor failed, another attempt to find the element(s) is made, this time generating a useful error message if it also fails.

Why: I've noticed that in the codebase I am working on, significant CPU time is spent generating useful error messages that are later discarded. In particular, I've found that in one particular test suite the function prettyDOM takes approximately ~100ms per execution. (The tested React component has a lot of DOM nodes since it embeds an instance of AG Grid.)

How: I've added a second argument to makeFindQuery which is supposed to be a getter function just like the first argument, but may not provide useful error messages in the case of failure, which is used in the call to waitFor. For backwards compatibility I'm using the first argument as a default. If the call to waitFor fails, then the first argument is used instead.

Checklist:

• [ ] Documentation added to the docs site
• [x] Tests (no new tests necessary)
• [x] TypeScript definitions updated (they don't need updating)
• [ ] Ready to be merged

Alternative: This PR implements just one possible approach to avoid the unnecessary work of generating informative error messages only for them to be discarded later. Another approach could build on _disableExpensiveErrorDiagnostics (introduced in #590):

• Only generate the potentially expensive parts (e.g. prettyDOM) of error messages if _disableExpensiveErrorDiagnostics=false.
• Adapt waitFor to use a strategy similar as implemented for findBy*/findAllBy* in this PR: First try calling runWithExpensiveErrorDiagnosticsDisabled(callback) and see whether this terminates without an error, but after the timeout occurs try once more without runWithExpensiveErrorDiagnosticsDisabled to get an informative error message in case of failure.

One advantage of this alternate approach would be that this would also decrease CPU usage when using getBy/getAllBy inside waitFor, like in the following code:

await waitFor(() => {
  expect(getByTestId("foo")).toHaveAttribute("href", "https://example.com");
});

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b81a964ee7a1e5e0a0c98518a32313e28770562c:

Sandbox	Source
react-testing-library-examples	Configuration