act() warnings when using React Hook Form

🐛 Bug Report

When a form that’s using form.register() from React Hook Form is conditionally rendered within a test, act() warnings are printed in the console.

A workaround seems to be to:

import { render } from '@testing-library/react'

const { page } = getPage({route: '/'})
render(page)

In the reproduction repo both variants (render from npt, render from tl) are used.

To Reproduce

1. Create a page with a form. Set a ref on an input in the form using form.register().
2. Mount and unmount the form within the page with a toggle switch In a test:
3. Render the page with render() from getPage()
4. act on the toggle switch to mount the form
5. console logs an act() warning

Expected behavior

No warnings

Link to repl or repo

https://github.com/osadi/npt-react-hook-form

Should work with npm i && npm run test

Run npx envinfo --preset jest

npx: installed 1 in 0.964s

  System:
    OS: Linux 5.4 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm
  npmPackages:
    jest: ^26.6.3 => 26.6.3 

[Meemaw]

It might be as simple as wrapping our hydrate call  into react’s act test utility, but I would like to do it on a reproducer without external dependency so we have a stable test for it.

[Meemaw]

Ah, I though you are receiving act warning after just after rendering  – not after performing client interactions. Those are out of scope of the library and its a known issue with react-hook-form, e.g. see https://github.com/testing-library/user-event/issues/457 for example.