post-upgrade, unexpected assertion failures on error-handling function calls (includes repro)

[trv-wcaneira]

• @testing-library/react version: 13.4.0
• Testing Framework and version: [email protected]
• DOM Environment: [email protected]
• node: 16.14.2
• react: 18.2.0

Relevant code or config:

  render(<App />);

  await screen.findByText('Failed!');

  //assertion fails unless we `waitFor` it
  expect(mockLog).toHaveBeenCalledWith('kaboom!')

What you did:

Upgraded existing application to react 18+ and RTL 13+.

What happened:

A number of tests starting failing assertions after upgrading.

In this case, the component is rendered with a simulated fetch failure. The component renders a child component that is responsible for error presentation and minor logging (in an effect hook). The test assertion on the logging function call fails unless it is awaited.

Reproduction:

I was able to reproduce the issue with a simple CRA repo, here: https://github.com/trv-wcaneira/fetch-err-waitfor-mcve

Problem description:

Pre-upgrade, it was sufficient to await the error message text rendered by the child component. Now it seems additional waiting is needed, and before I plaster waitFors all over our tests :smile:, I'd just like to understand why.

Suggested solution:

I could obviously change all the tests to waitFor the logging function call, but would like to understand the change in behavior.

[osd-barry]

Same for me. When I upgraded TL/R version 13 and run yarn test a bunch of test cases failed and need to add waitFor for each. Could someone explain it?

[shankyjoshi]

Same for me. Why do we need to plaster each test with wait For ? ... Please resolve this issue asap.

[abhijithss2010]

Do we still have to plaster each of the test case with waitFor ? Is there any better alternative?

[shankyjoshi]

My issue was resolved. We don't need to plaster each test with waitFor. It was failing because userevent Library was also updated, with its current latest version it has now made all user events asynchronous. So just needed to add await to all userevent calls and it resolved all test cases.

[abhijithss2010]

@shank2512 For me there is no userEvent calls in one test case, and i update the state inside a component using setTimeout. Even that test case is failing. Even if you are patching the userevent calls , you will be adjusting most of the test cases