React 18. set state in finally throws "act" warning, though test is passing

[JoeyAtSS]

• @testing-library/react version: 13.1.1
• Testing Framework and version: jest 27.5.1
• DOM Environment: jest-dom 27.5.1

Relevant code or config:

  const handleSavedCardPayment = () => {
    const paymentInfo = {
      amount: formDataRef.current.amount,
      userId,
      accountId: formDataRef.current.selectedCardAccountId,
    };

    dispatch(makePayment(paymentInfo))
      .then(handlePaymentSuccess)
      .catch(noop) // already caught by thunk
      .finally(() => {
        formDataRef.current = null;
        setSubmitting(false);
      });
  };

What you did:

NOTE: This error only shows up after updating to react 18 and testing library to 13.1.1, this was not an issue in earlier version.

setSubmitting toggles the button disability. When the promise is complete, it turns the re-enables the button. so the test is doing a waitFor button to be re-enabled.

the promise looks more like this

dispatch(makePayment(paymentInfo)) returns a promise, with a catch inside.

so the whole promise chain looks like this
promisedFunction().then(() => do something).catch(error => show error). then(() => componentLevel).catch(do nothing here).finally(reset state)

What happened:

the "act" error is thrown, even though i've added a waitFor and that is passing to prove that that statement has already been rendered.

await waitFor(() => expect(screen.getByRole('button', { name: /submit/i })).not.toBeDisabled());

Problem description:

set state in finally seems to cause testing library to think act is incomplete, even though it is.

currently solving the error by putting the set state inside of catch

However, there's the WET code, i had to put the set state into handlePaymentSuccess too, to achieve the same results.

[intercaetera]

I encountered something similar while using Formik, I suspect this is related. Here is a repo which reproduces this issue:

• https://github.com/intercaetera/testing-library-act

This only happens on the new version of RTL and React 18.

[clothoo]

I'm using react-hook-form and experience the same act warning. Using either waitFor or waitForElementToBeRemoved doesn't remove the warning.

The only thing that worked is to wrap act with sleep.

  await act(async () => {
    await new Promise((resolve) => {
      setTimeout(resolve, 50);
    });
  });

credit to https://bufferings.hatenablog.com/entry/2021/11/18/015809

[hlmnd]

I also experienced the warning by updating the version of react "18" and testing library.
After checking the flow, note that now you need to explicitly make "expect" for all the things that are updated.

React 17	React 18
I had 2 snack bar and just wait "expect" for one, did not throw warning	Remove a snackbar (my use case)
For the validation of the form "react-hook-form", it only validated that the entries are invalid	now I had to add the "expect" for the focus

Example with react-hook-form validation

test('should show validations errors on submit', async () => {
   const { user } = render(<Default />)

   await user.click(screen.getByRole('button', { name: 'Login' }))

   await waitFor(() => expect(screen.getByLabelText(/email/i)).toHaveFocus()) //  [new] working only when is the first expect
   await waitFor(() => expect(screen.getByLabelText(/email/i)).toBeInvalid())
   await waitFor(() => expect(screen.getByLabelText(/password/i)).toBeInvalid())
 })

Summary:

• You have to explicitly test everything that is updated on the screen, to remove the warnings. I hope it will help someone.

[eps1lon]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://react.new), or a link to a repository on GitHub.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[intercaetera]

@eps1lon Is my example in this comment not sufficient to demonstrate the issue?

[bedrich-schindler]

I have observed the same behavior as @JoeyAtSS. After update to the latest React 18 and the latest RTL, we had to change following across whole application, otherwise error from above is shown:

We also observed #1057. Unfortunately, I haven't observed pattern in which it happens.

[guilhermegalabarof]

Hey guys, i made some tests because I am having the same problem:
This is what I got.

"@testing-library/react": "^13.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@testing-library/user-event": "^14.2.1",

// it pass without act() warning
fireEvent.change(loginField, { target: { value: '' } })
expect(loginField).toHaveValue('')

// it gives the act() warning
fireEvent.change(loginField, { target: { value: '' } })
await waitFor(async () => {
  expect(loginField).toHaveValue('')
})

// don't wait the render - error
fireEvent.click(loginButton)
expect(screen.queryAllByText('Campo obrigatório')).toHaveLength(2)

// it pass all fine :)
fireEvent.click(loginButton)
await waitFor(async () => {
  expect(screen.queryAllByText('Campo obrigatório')).toHaveLength(2)
})

This way it works fine:

// it pass without act() warning
fireEvent.change(loginField, { target: { value: '' } })
expect(loginField).toHaveValue('') 

But if I change to userEvent, I get the act() warning all over again.

userEvent.clear(loginField)
expect(loginField).toHaveValue('')

[bobsilverberg]

I am having a similar problem after updating to react 18.2.0 and @testing-library/react 13.3.0. Some of my calls to dispatch store actions need to be wrapped in await act(async () => {...} ). I thought that @testing-library/react took care of the act wrapping for us.

[szimek]

@eps1lon I replicated our issue here: https://codesandbox.io/s/rtl-react-18-act-issue-forked-l0bcj2?file=/src/__tests__/App.test.js.

You can see this error when you run tests and check the output in the console. In our case it's triggered by a component that uses react-query with dynamic import.

We're getting these warnings/errors in other places as well (e.g. we had 2 getByText(...).click() calls right after each other and after updating to React 18, I had to wrap each in a separate act call), but I wasn't able to create a minimal example for these.

[thepuzzlemaster]

I'm running into the same problem upgrading my App to React 18, and RTL to 13.3.0.

In my case, I've even got a test which triggers an act warning for every letter pressed from await user.type() triggering an onChange handler, which just calls a setter from a useState hook.

Even if I add await waitFor(() => expect(myInput).toHaveValue(finalValue) it still throws the warnings (amongst hundreds of other act warnings in my other tests).