Do I need await before every userEvent call?

[wuarmin]

Hey,
I have a question while upgrading a test-suite to "@testing-library/user-event": "^14.0.0". It seems I have to put await before every userEvent-call. When I do something like this, to test a loading-state:

  user.click(getRow(rowName));
  await screen.findByText(`Loading...`);

it works, but I get following warning:

console.error
      Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one.

After I put the await before the click-call

await user.click(getRow(rowName));
await screen.findByText(`Loading...`);

The warning disappears, but the findByTest-call fails.

Can you give me some hints?

Thanks and best regards

[ph-fritsche]

https://github.com/testing-library/user-event/releases/tag/v14.0.0

14.0.0 (2022-03-29)

⚠ BREAKING CHANGES

• APIs always return a Promise.

The change was discussed in #504

How a test with v14 should look like is documented at https://testing-library.com/docs/user-event/intro#writing-tests-with-userevent

[wuarmin]

Ok thank you. I understand! Do you have a hint how to test the loading-state? After waiting for the click, the loading state can no longer be checked. Is this the recommended way?:

  await Promise.all([
    user.click(getRow(rowName)),
    screen.findByText(`Loading...`)
  ]);

It seems to work.

[ph-fritsche]

The promise returned by user.click will be resolved when the interaction is completed (including an extra delay to allow asynchronous updates to happen).
If the loading state is still present afterwards, depends on how that state is being updated.

If the component is e.g. fetching data, I'd recommend to control the data response and resolve it after the interaction:

await user.click(el)
expect(screen.getByText('loading')).toBeInTheDocument()
myFetchMock.respondToPendingRequest()
// waitFor / findBy the resulting state

If the exact order how things happen is deemed trivial or unimportant, running the solution per Promise.all is sufficient.

[wuarmin]

Thanks!

[1-800-jono]

Having a similar problem after updating to 14.4.3. I'm testing multiple userEvent.click() consecutively. To simulate a user clicking multiple times on a button and then test if it's disabled. (Carousel component)

await userEvent.click(screen.getByLabelText(/next/i))
await userEvent.click(screen.getByLabelText(/next/i))

 expect(screen.queryByLabelText(/next/i)).toBeDisabled()

This works but get the overlapping act() error.