Warning 'An update inside a test was not wrapped in act(...)' while testing with React Testing Library

[antoine-coulebaud]

Hi

I wanted to test some of my react-hook-form components with react-testing-libray.

While some of my tests seems to pass as expected, the warning An update inside a test was not wrapped in act(...) pops and I can't figure why. I tried to reduce the code to the minimum in ordre to reproduce, and rewrite it in a sandbox (https://codesandbox.io/s/adoring-lamarr-xxxnj) but infortunately an other error occurred and I can't retrieve the exact same warning as in my own repo.

Can you tell me :

1. How to fix the sandbox ?
2. What's wrong with my code / test and what can trigger this warning ?

Thanks

[bluebill1049]

hey @antoine-coulebaud this is mostly due to async validation. you will need to wrap with async act, you can take a look at our repo for tests examples.

[lguardado]

The link is broken btw, this is the working one today:
https://github.com/react-hook-form/react-hook-form/blob/master/src/__tests__/useForm.test.tsx

[kathyhuang666]

@IanVS Did you find a solution?

[IanVS]

The key seems to be using waitFor liberally, and being sure that each change is waited for, before making other changes.

[kathyhuang666]

Thanks a lot for the replying!

[ratnajeet-wenergy]

This worked perfectly for me. Even after I wrapped the previous statement in act, it was still throwing the same error. After adding waitFor in the next line, it worked perfectly.

[mAAdhaTTah]

I'm dealing with this as well. My understanding is the onChange mode performs an initial async validation right after render which triggers the warning. Changing modes would ostensibly fix it, but I don't have a fix (yet) for the onChange mode.

[bondarenko09]

hey @mAAdhaTTah any updates to fix that?

[mAAdhaTTah]

No, I just changed modes.

[brandonlenz]

I have the same issues with tests that trigger react hook form's onChange handler. If I find a solution for that, I'll update.

[inPhoenix]

My issue is when I wrap the fireEvent with the act, it solves the warning, but then I get the following Eslint error:
ESLint: Avoid wrapping Testing Library util calls in act(testing-library/no-unnecessary-act)

My code:

await act(async () => {
      fireEvent.change(screen.getByLabelText("Email"), {
        target: { value: "[email protected]" },
      });

My test verifies if the error is not in the document, and the waitFor solution does not work for me.

[Belco90]

Hey @inPhoenix! I'm the author of eslint-plugin-testing-library, and I implemented the no-unnecessary-act rule.

I found myself in the same situation as you when testing a form built with react-hook-form. When waiting for something after triggering an event with Testing Library, but still seeing the act warning, I'm afraid the act() is necessary and no-unnecessary-act rule has to be suppressed.

I still don't understand what happens inside react-hook-form to cause this weird behavior.

[brandonlenz]

@Belco90 Closing in on a year later, did you have any success? I'm running into these when calling userEvent methods that trigger the RHF onChange handler, as well as form submission.

So far I have to write

await act(() => user.click(submitButton))

or

await act(() => user.click(yesAnswer))

instead of the correct

await user.click(submitButton)

or

await user.click(yesAnswer)

respectively.

Hoping someone has a better answer. I'm working on conversion from Formik to RHF. RHF is better in a ton of ways, but this is a huge annoyance when you have lots of tests already.

[brandonlenz]

The submitButton one surprises me, since I have an await waitFor just afterwards specifically testing that the error validation shows up. But that's what's happening 🤷🏻

[craigmcc]

What has worked for me was eliminating the act() wrapper completely, so using things like:

        await client.click(save);

instead of

        await act(async () => {
            await client.click(save);
        });

made all those warnings go away. Maybe the double await was part of the issue?

[brandonlenz]

@craigmcc I get warning unless I use act. I started off coding user events the correct way (see previous answer), but the redundant act resolved the warnings.

I'd love a solution that doesn't involve going against UserEvent best practices, though.

[pengpengzx]

    await act(async () => {
      render(<MyComponent/>, {
        wrapper: Wrapper,
      });
    });

Add await act (async () => {}) works for me

[pengpengzx]

Thanks, learned a lot!

[adroste]

This is the official recommended way when doing simple snapshot tests, see: https://react-hook-form.com/advanced-usage#TestingForm

[Belco90]

I've updated the react-hook-form advice about testing forms in this PR, should be fine now!

[bluebill1049]

thanks for correcting that @Belco90 please refer to the updated doc @adroste (sorry about that incorrect information)

[liorpevzner]

Im sorry but why is this an anti-pattern?
If my component is complex and has many api calls on init(which I'm mocking with w/e library I'm using) why wrapping my component with act is an anti-pattern? I want all my async functions to resolve and my DOM to be stable before I start asserts.
Ive read what you sent by kentcdodds (great read, thanks very informative).

[vcapretz]

@bluebill1049 @Belco90 hi there folks, thank you for the docs on testing, they really helped 🙏

I'm still seeing the ...was not wrapped in act... warnings when trying to destruct values from formState.

I have a reproducible example in this CodeSandbox link
I copied the exact example from the docs page and the only change was

const {
    register,
    handleSubmit,
    formState,
} = ...

to

const {
    register,
    handleSubmit,
    formState: { isValid }
  }

is there any recommended workaround for this scenario?

[VictorGlindasPaf]

This doesn't always work, as the element appears before the validation happens.
So if I test that text in the form appears, validation still happens and throws "act" errors afterwards.

[josafatclicktripz]

Same here, still happens even by using the solution explained in testing section. Only happens when you pass defaultValues 😢 Shared CodeSandbox from @vcapretz has the most basic repro steps for this issue.

[thiago-silva-ac]

Same here, waiting for element to appear doesn't fix the problem when using "isValid". There is some way of waiting for this validation?

[neilsot]

For validation related "act" errors that occur after your last meaningful test assertion what about awaiting unmount?

it("should have two text inputs", async () => {
  const { unmount } = render(<Form />);
  
  expect(await screen.findAllByRole('textbox')).toHaveLength(2);
  await unmount();
}

Internally it looks like react-testing-library is wrapping unmount in act().

I like that this approach prevents me from having to call act() manually, or add extra test assertions just to wait for react-hook-form validation. Something I don't like about this approach is that the await unmount() might mask other act errors from async effects unrelated to react-hook-form that should have been handled (or mocked).

[LucasHimelfarb]

@Belco90 's solution is correct. You should wait for the FIRST element of your Form, in react native it means the first Controller renderer I guess...

[jackson5cc]

Having the same issue when using React Hook Form with a Select component in Radix UI.

If my form has either a Select or a TextInput , everything works like a charm. I'm using the latest user-event library and awaiting all user actions. But if I have both a TextInput and a Select, I get the famous warning.

Here are my two workarounds:

• Workaround 1: Select an option from the Select component before typing into the input field.
• Workaround 2: Call user.tab() after typing into the field.

I cannot understand why these workarounds work. Can anyone explain it to me?