issue: warning in testing

[ko22009]

Version Number

latest

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-unit-test-act-warning-docs-forked-yhw848?file=/src/App.test.js

Steps to reproduce

Go to tests and run test.

Warning: An update to App inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
    at App (https://yhw848.csb.app/src/App.js:21:34)

Expected behaviour

No show warning

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Moshyfawn]

https://react-hook-form.com/advanced-usage#TransformandParse

[ko22009]

solution: await waitFor(() => expect(screen.queryByText(/Loading/i)).not.toBeInTheDocument());
In component, I use isSubmitting, which show me Loading

[LucasHimelfarb]

I've the same issue in React Native

Example:

  it('The username input is unfilled and the login button is disabled', async () => {
    const { getByTestId, findByTestId } = render(<LoginScreen { ...props } />);

    const passwordInput = await findByTestId('password-input');
    const signInButton = getByTestId('sign-in-button');

    await userEvent.type(passwordInput, 'SamplePassword');

    expect(signInButton).toBeDisabled();
  });

Why that unit test results on:

Warning: An update to ForwardRef inside a test was not wrapped in act(...).

  When testing, code that causes React state updates should be wrapped into act(...):

[dwjohnston]

For the use case I had, I was writing some tests like this:

render(<TheComponent/>); 

userEvent.click(screen.getByRole("button", {name: "Submit"}); 

// This one is fine, because we wait for it. 
expect(
  await screen.findByText(
     'validation error here'
  )
).toBeInTheDocument();


userEvent.type(screen.getByRole("textbox", {name: "some-textbox"}), "some invalid text"); 
userEvent.click(screen.getByRole("button", {name: "Submit"}); 
// This one isn't fine, because the validation error hasn't actually gone away yet. 
// So the find resolves immediately, before the useHookForm validation completes and acts
expect(
  await screen.findByText(
     'validation error here'
  )
).toBeInTheDocument();

To resolve, what I did was:

In the component:

const hookForm = useHookForm(); 
return <div       data-testid={
        hookForm.formState.isValidating ? 'validating' : 'not-validating'
      }> 
  // snip
</div>

In the test:

userEvent.click(screen.getByRole("button", {name: "Submit"}); 

// Add this to expect to see the blink between validating and not-validating, in order to catch the async action
expect(screen.getByTestId('validating')).toBeInTheDocument();
expect(await screen.findByTestId('not-validating')).toBeInTheDocument();

expect(
  await screen.findByText(
     'validation error here'
  )
).toBeInTheDocument();