How do you test with handleSubmit and fireEvent?

[mdbiscan]

Using

• react-native
• react-hook-form
• jest-expo
• react-testing-library
• mirage-js

I'm testing a screen for a simple form submission. What I expect is a network call, with a response.

What's Happening

const onSubmit = async formData => {
  await ApiService.put('greet', formData);
};

// ... 

<Button
   accessibilityLabel="Continue"
   disabled={isDisabled}
   onPress={handleSubmit(onSubmit)}
   isLoading={isLoading}
>
  Continue
</Button>

I'm expecting a log from the console from the network request in this test.

    server.put('/greet', (server, request) => {
      console.log('request', JSON.parse(request.requestBody));
    });

    const {
      getByLabelText,
    } = render(<EnterPhoneNumberScreen />);

    let input = getByLabelText('Phone Number');
    let button = getByLabelText('Continue');

    await fireEvent.changeText(input, { nativeEvent: { text: '123-123-1234' } })
    await fireEvent.press(button);

The event seems to get swallowed by handleSubmit. The nextwork call never happens, as onSubmit is never fired (or maybe fires after the test is done).

This works when removing handleSubmit:

<Button
   accessibilityLabel="Continue"
   disabled={isDisabled}
   onPress={onSubmit}
   isLoading={isLoading}
>
  Continue
</Button>

I tested whether or not handleSubmit is even being fired in the test environment. It appears not to be.

[bluebill1049]

for react-native you will need to stub window object. This will be part of the FAQ in the new doc

beforeAll(() => { global.window = {} })
afterAll(() => { global.window = undefined} })

[mdbiscan]

I'll see what I can do. Thanks!

[mdbiscan]

I got it to finally work, but it is unexpected.

I have a custom validator inside a ref like so:

<TextInput
  dataDetectorTypes="phoneNumber"
  keyboardType="numeric"
  accessibilityLabel={translations.t('label.phoneNumber')}
  placeholder="e.g. 234 121 1212"
  onChangeText={text => {
    setValue('PhoneNumber', text);
    setDisabled(isEmpty(text))
  }}
  ref={
    register({ name: 'PhoneNumber' }, {
      required: true,
      validate: {
        telephone: value => validatePhoneNumber(value),
      },
    })
  }
/>

First problem is that that register doesn't work when it's inside a ref. I moved it to useEffect. This is the strange part, because using the ref works outside of tests. There's probably an error somewhere getting swallowed up that happens before the handleSubmit in the code, because that never fires.

Second problem is validatePhoneNumber. From the react testing library documentation, this should theoretically work:

await fireEvent.changeText(input, { nativeEvent: { text: '123-123-1234' } });

But, value is { nativeEvent: { text: '123-123-1234' } } when it should just be the string. I modified this to:

await fireEvent.changeText(input, '123-123-1234');

This now sends the correct string for value as it does outside of tests.

[bluebill1049]

Hey @mdbiscan make sure you register at useEffect. I don't think react native component expose ref.

[mdbiscan]

It doesn't, in the test environment, but it works as expected otherwise.

[keiya01]

I think you can use waitFor method in testing-library.