material-ui dialog causes react-hook-form to change isValid value causing RTL act errors

Question

I am trying to test a dialog with react testing library. This dialog contains a form I render with react hook form. This form has a single field with some validation on it. When the component renders, isValid flips from false to true to false again. This causes issues with react testing library as it detects changes and complains about act.

I have created a small sandbox to demonstrate my issue here: https://codesandbox.io/s/intelligent-chaum-pmgozq?file=/src/App.tsx

See how isValid goes from false to true to false again in the console.

Now, remove the wrapping Dialog and watch it work as intended, sticking at false.

However, it seems to be a combination of both Dialog and react-hook-forms proxy of isValid. If I remove all references to isValid, then the form renders only once.

I am not sure how I can get around this or what the right approach is. I would like to test the entire dialog, as KCD always says to test as close to the user experience as possible, so I don't think extracting the form and testing that is a good idea. In the same breath, im not even sure how to utilise waitFor to get around the issue.

Answer 1

I think an alternative approach of writing code will help in this scenario.

I have extracted your form and all logic related to react-hook-form in a new component called MyForm and then I rendered MyForm inside Dialog component.

Now I can see only 1 log in the console.

Here is the link of changed codesandbox: https://codesandbox.io/s/magical-frog-cjpi3h?file=/src/App.tsx