Show stack-trace for failed findBy or waitFor

Describe the Feature

Currently, if your test has a lot of await findBy, if one of them fails, it’s hard to know which one from the error message. It’d be great if the error message would include the line of the findBy that fails, the same way it does for getBy

with findBy:

  ● Testing react navigation › clicking on one item takes you to the details screen

    No instances found

with getBy:

 ● Testing react navigation › clicking on one item takes you to the details screen

    No instances found

      24 |     fireEvent(toClick, 'press');
      25 |     const newHeader = await findByText('Showing details for 5');
    > 26 |     const newBody = getByText('the number you have chosen is 6');

Possible Implementations

I’d be happy to look into the code and see if I can provide a PR if nobody is currently working on this.

[thymikee]

None that I know of

[mdjastrzebski]

@kevinbror KCD also recommends using only single assertion for waitFor queries in his Common mistakes with RTL article. The reasoning is as follows:

// ❌
await waitFor(() => {
  expect(window.fetch).toHaveBeenCalledWith('foo')
  expect(window.fetch).toHaveBeenCalledTimes(1)
})

// ✅
await waitFor(() => expect(window.fetch).toHaveBeenCalledWith('foo'))
expect(window.fetch).toHaveBeenCalledTimes(1)

Let’s say that for the example above, window.fetch was called twice. So the waitFor call will fail, however, we’ll have to wait for the timeout before we see that test failure. By putting a single assertion in there, we can both wait for the UI to settle to the state we want to assert on, and also fail faster if one of the assertions do end up failing.