act warnings with testing-library

[mauriceoc]

Hi, I read the following doc about testing using react-hook-form with testing-library:

https://react-hook-form.com/faqs#TestingReactHookForm

I have updated setup.js with import "@testing-library/jest-dom"; and it is importing correctly but I am getting warnings about act when I run my test.

My test is really simple:

    it('renders without warnings',  () => {

        render(
            <MyTestForm />
        );
        expect(true).toBeTruthy();
    });

And the component looks like this:

export function MyTestForm() {
    const {register} = useForm();

    return <form><input type='text' id='yay' name='yay' ref={register}/></form>;

}

The test passes but I get this error on running:

  console.error
    Warning: An update to MyTestForm 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 MyTestForm

      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
      at warnIfNotCurrentlyActingUpdatesInDEV (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
      at dispatchAction (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
      at ../../node_modules/react-hook-form/src/useForm.ts:168:7
      at ../../node_modules/react-hook-form/src/useForm.ts:703:11
      at MutationObserverImpl._callback (../../node_modules/react-hook-form/src/utils/onDomRemove.ts:21:9)

  console.error
    Error: Uncaught [TypeError: Cannot read property 'body' of null]
        at reportException (/Users/code/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
        at notifyMutationObservers (/Users/code/node_modules/jsdom/lib/jsdom/living/helpers/mutation-observers.js:166:11)
        at /Users/code/node_modules/jsdom/lib/jsdom/living/helpers/mutation-observers.js:133:5
        at processTicksAndRejections (internal/process/task_queues.js:93:5) TypeError: Cannot read property 'body' of null
        at getActiveElement (/Users/code/node_modules/react-dom/cjs/react-dom.development.js:6651:16)
        at getActiveElementDeep (/Users/code/node_modules/react-dom/cjs/react-dom.development.js:6939:17)
        at getSelectionInformation (/Users/code/node_modules/react-dom/cjs/react-dom.development.js:6972:21)
        at prepareForCommit (/Users/code/node_modules/react-dom/cjs/react-dom.development.js:7463:26)
        at commitRootImpl (/Users/code/node_modules/react-dom/cjs/react-dom.development.js:22474:5)
        at unstable_runWithPriority (/Users/code/node_modules/scheduler/cjs/scheduler.development.js:653:12)
        at runWithPriority$1 (/Users/code/node_modules/react-dom/cjs/react-dom.development.js:11039:10)
        at commitRoot (/Users/code/node_modules/react-dom/cjs/react-dom.development.js:22381:3)
        at finishSyncRender (/Users/code/node_modules/react-dom/cjs/react-dom.development.js:21807:3)
        at performSyncWorkOnRoot (/Users/code/node_modules/react-dom/cjs/react-dom.development.js:21793:7)
        at /Users/code/node_modules/react-dom/cjs/react-dom.development.js:11089:24
        at unstable_runWithPriority (/Users/code/node_modules/scheduler/cjs/scheduler.development.js:653:12)
        at runWithPriority$1 (/Users/code/node_modules/react-dom/cjs/react-dom.development.js:11039:10)
        at flushSyncCallbackQueueImpl (/Users/code/node_modules/react-dom/cjs/react-dom.development.js:11084:7)
        at flushSyncCallbackQueue (/Users/code/node_modules/react-dom/cjs/react-dom.development.js:11072:3)
        at scheduleUpdateOnFiber (/Users/code/node_modules/react-dom/cjs/react-dom.development.js:21199:9)
        at dispatchAction (/Users/code/node_modules/react-dom/cjs/react-dom.development.js:15660:5)
        at /Users/code/node_modules/react-hook-form/src/useForm.ts:168:7
        at /Users/code/node_modules/react-hook-form/src/useForm.ts:703:11
        at MutationObserverImpl._callback (/Users/code/node_modules/react-hook-form/src/utils/onDomRemove.ts:21:9)
        at notifyMutationObservers (/Users/code/node_modules/jsdom/lib/jsdom/living/helpers/mutation-observers.js:158:14)
        at /Users/code/node_modules/jsdom/lib/jsdom/living/helpers/mutation-observers.js:133:5
        at processTicksAndRejections (internal/process/task_queues.js:93:5)

      at VirtualConsole.<anonymous> (../../node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at reportException (../../node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:28)
      at notifyMutationObservers (../../node_modules/jsdom/lib/jsdom/living/helpers/mutation-observers.js:166:11)
      at ../../node_modules/jsdom/lib/jsdom/living/helpers/mutation-observers.js:133:5

Any idea what could be causing this? I'm assuming react-hook-form is updating on initial render or something? Or perhaps calling setState when the test framework unmounts it?

If I remove the ref prop (disabling react-hook-form) then I get no warnings and the test passes.

My dep versions are:

• @testing-library/react 11.0.4
• @testing-library/jest-dom 5.11.4
• react-hook-form 6.9.2

Thanks!

[bluebill1049]

have a look at this section: https://react-hook-form.com/advanced-usage#TestingForm also it's good to remember everything in hook form is async around validation.

[mauriceoc]

Yup I read this already.

I'm not triggering any form events, just mounting the component is causing the warning.

    it('renders without warnings',  () => {

        render(
            <MyTestForm />
        );
        expect(true).toBeTruthy();
    });

When I remove ref={register} from my component everything is OK.

Does register trigger a state update inside the component? Should I get act warnings for just rendering a component in react testing library?

[bluebill1049]

can you share a codesandbox with test

[tomdev10]

I too am having this problem, I can't reproduce on CodeSandbox as seem to be suffering from this problem: https://www.reddit.com/r/reactjs/comments/gextsk/react_testing_library_and_reacthookform_components/ and the inability to customise jest. I'll share as much info as I can below, and try and continue to look into this.

Versions : (I think this is everything needed)

react-hook-form: "^6.11.5",
react: "^17.0.1",
react-dom: "^17.0.1",
@testing-library/dom: "^7.28.1",
@testing-library/jest-dom: "^5.11.6",
@testing-library/react: "^10.4.9",
jest: "^26.6.3",

Login.js:

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

const Login = () => {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data) => console.log(data);
  return (
    <div onSubmit={handleSubmit(onSubmit)} data-testid="login-form">
      <div>
        <input
          label="email"
          id="login-form-email"
          name="email"
          type="email"
          ref={register({ required: true })}
          errors={errors.email}
        />
        <input
          label="password"
          id="login-form-password"
          name="password"
          ref={register({ required: true })}
          errors={errors.password}
        />
      </div>
      <button type="submit">Submit</button>
    </div>
  );
};

export default Login;

Login.test.js:

import React from "react";
import { render } from "@testing-library/react";

import Login from "./Login";

describe("<Login /> component", () => {
  test("its snapshot matches", () => {
    const { container } = render(<Login />);

    expect(container).toBeDefined();
    expect(container.firstChild).toMatchSnapshot();
  });
});

For me, this was working fine before various package upgrades. I'm now going to try and isolate exactly what caused this problem. Any help much appreciated and loving the library 🙌

[tomdev10]

https://codesandbox.io/s/hardcore-tereshkova-wuurh - WIP Codesandbox too

[xveganxxxedgex]

Not sure if it helps for your test case, but I was able to get my tests passing through mocking the library:

jest.mock("react-hook-form", () => ({
  useForm: () => ({
    handleSubmit: (func: () => Promise<any>) => () => func(),
    register: jest.fn(),
  }),
}));

[dsaltares]

This does not really help if you also want to test form interactions including validation and submission.

[xuhdev]

I found that explicitly unmounting the tested component resolves the issue, but I don't know why:

   it('renders without warnings',  () => {
        const { unmount } = render(<MyTestForm />);
        expect(true).toBeTruthy();
        unmount();
    });

Additionally, I found the warning would go away as long as the test contains awaiting any user interaction. For example:

    it('renders without warnings',  () => {
        const user = userEvent.setup();
        render(<MyTestForm />);
        await user.click(screen.getByRole('button'));  // assuming your screen has a button
        expect(true).toBeTruthy();
    });

[xuhdev]

I found this was also discussed at testing-library/react-testing-library#999 (comment) with a similar solution.