Bug - Inconsistent behavior between browser and test environment with react-hook-form with react-select

• @testing-library/react version: 11.2.7
• Testing Framework and version: Jest + bundled version with CRA version 4.0.3
• DOM Environment: bundled version with CRA version 4.0.3

Relevant code or config:

react-hook-form-jest-issues.zip

I have tried to reproduce this issue in code sandbox, but due to some issue with code sandbox, I am unable to click a react-select element in a test. I have opened an issue with the code sandbox client for this. Therefore I have attached a simple reproduction using create-react-app.

https://github.com/codesandbox/codesandbox-client/issues/6257

What you did:

Ran a test that selects an option from a react-select component.

What happened:

The form management library (react-hook-form in this case) did not update its internal state correctly inside of the testing environment only. Specifically, the library is reporting that errors are present in the formState.errors object when there should be no errors. If the actions in the test are replicated on the browser, no errors are present after the option is selected which is the expected behavior.

Reproduction:

1. Open the attached project
2. Run npm install
3. Run npm start and open the project in your browser
4. Select an option from the select input. Open the console. Notice that the final console log of formState.errors is an empty object and formState.isValid is true as expected .
5. Run npm test and select all tests using the a key
6. Notice that the final console log of the test reports formState.errors as not being empty. Instead, an error is present while formState.isValid is true. This is incorrect and does not match how the browser logs.

The output from jest is: formState.errors: [object Object] formState.isValid: true The output from the browser is: formState.errors: undefined formState.isValid: true

Problem description:

This is a problem since I cannot write accurate tests for a large portion of my app. The issue seems to be isolated to react-hook-form version 7.15.1 and above, react-select, and inputs that use the field array feature inside react-hook-form. I spoke to the react-hook-form author and he does not believe this is an issue with the react-hook-form library as the correct behavior occurs in the browser.

Suggested solution:

I’m not sure what the correct code solution is, but it seems to be related to context not being updated correctly in certain cases within the testing environment.

[wdfinch]

It seems this has been resolved in newer react-hook-form versions.

[ph-fritsche]

Thanks for the update on this.