Behavior of formState is different when running on react native app vs when running on jest test

Describe the bug Behavior of formState is different when running on react native app vs when running on jest test. Reproduced in version 6.3.0.

To Reproduce Steps to reproduce the behavior:

1. Create a React Native project.
2. Install react-hook-form, @testing-library/react-native, and @testing-library/jest-native.
3. Copy example form implementation into App.js.
4. Change useForm to use onChange mode.

const {control, handleSubmit, errors, formState} = useForm({
  mode: 'onChange',
});

1. Add <Text> to display current form state.

<Text>
  {formState.isValid ? 'formState: "Valid"' : 'formState: "Invalid"'}
</Text>

1. Disable <Button> if formState is not valid

<Button
  disabled={!formState.isValid}
  accessibilityLabel="Submit Button"
  title="Submit"
  onPress={handleSubmit(onSubmit)}
/>

1. Replace __tests__/App-test.js with the below snippet.

import React from 'react';
import {render} from '@testing-library/react-native';
import App from '../App';

describe('checking formState.isValid', () => {
  it('should initialize with an invalid state', () => {
    const {getByText} = render(<App />);
    getByText('formState: "Invalid"');
  });

  it('should have a disabled submit button', () => {
    const {getByA11yLabel} = render(<App />);
    const submitButton = getByA11yLabel('Submit Button');
    expect(submitButton).toBeDisabled();
  });
});

1. Run test yarn test

Github link As I encountered this issue in a React Native project, I’m providing a link to the template repo created to reproduce the error.

Expected behavior Both app and jest test should start off with formState.isValid as false. However, jest test starts off with formState.isValid as true.

Screenshots Below is what happens in the react native app

Below is what happens in the jest test

Desktop (please complete the following information):

• N/A as this is an issue in React Native

Smartphone (please complete the following information):

• Device: iPhone 11 Pro Max Simulator
• OS: iOS 13.6

[tingzhouu]

It works now 🎉🎉🎉 My apologies for missing out on the documentation.

For anyone who comes across this, add setup.js in the root directory with the following snippet:

global.window = {};
global.window = global;

add "<rootDir>/setup.js" to package.json like this:

"jest": {
  "preset": "react-native",
  "setupFilesAfterEnv": [
    "@testing-library/jest-native/extend-expect",
    "<rootDir>/setup.js"
  ]
}

Have updated the repo with the changes as well.

Thank you @keiya01 for your help!

[keiya01]

I think this issue is caused by async function. We are updating formState.isValid by async function. Therefore you should wrap getByText with wait method in @testing-library/react-native. (link: https://www.native-testing-library.com/docs/api-async)