Error thrown when using react hooks

Description

Given a react component using hooks When a you attempt to use a user event e.g. type Then you receive the error below

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

Reason

As far as I understand this is because we are using the fireEvent from @testing-library/dom directly and not from @testing-library/react which means that it is not being in act.

Solution

A possible solution would be to allow for the user to provide a fireEvent implementation or allow for this to be configured in test setup

[AmirTugi]

This issue is still happening. Why is this lib still using the fireEvent from the @testing-library/dom? Any idea if that’s going to be changed/fixed?

[matburnham]

If I strip it right back, all is fine:

BasicForm.js:

import React from 'react';

const BasicForm = () => {
  const onSubmit = e => {
    e.preventDefault();
  };
  return (
    <form onSubmit={onSubmit}>
      <input type='submit' />
    </form>
  );
};

export default BasicForm;

BasicForm.test.js:

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import BasicForm from './BasicForm';

it("doesn't fall over on userEvent.click", async () => {
  render(<BasicForm />);
  userEvent.click(screen.getByRole('button'));
});

---

The problem is only present when I use handleSubmit from react-hook-form:

BasicForm.js:

import React from 'react';
import { useForm } from 'react-hook-form';

const BasicForm = () => {
  const { handleSubmit } = useForm();
  const onSubmit = data => {};
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type='submit' />
    </form>
  );
};

export default BasicForm;

npm run test BasicForm:

 PASS  src/BasicForm.test.js
  ✓ doesn't fall over on userEvent.click (170ms)

  console.error node_modules/react-dom/cjs/react-dom.development.js:88
    Warning: An update to BasicForm 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://fb.me/react-wrap-tests-with-act
        in BasicForm (at BasicForm.test.js:7)