Not being able to test onSubmit while using react-hook-form

[poojan1296-eng]

I am facing an issue while writing unit test case to check whether the submit function is getting invoked. The issue I am facing is the similar one as that of: https://spectrum.chat/react-hook-form/help/solved-testing-the-onsubmit~364b8d79-c2f2-4d1c-a3ae-d56fed134128

However, the code structure I am using is slightly different in the sense that I am not returning the "form component" directly but instead I am returning the "form component " wrapped inside "FormContext".

export const CreateNewGame = () => {
  const [diceType, setDiceType] = useState(null);
  const { handleSubmit, register, errors, reset } = useForm({
    mode: 'onChange',
  });
  const submit = (data) => {
    console.log(data);
    reset({
      title: '',
      gameType: '',
      diceNumber: '',
    });
  };
  const dataSource = [
    'Settlers',
    'Catan',
    'Pandemic',
    'Ticket to Ride',
    'Risk',
    'Yatzy',
    'Dungeon and Dragons',
  ];
  useEffect(() => {}, [diceType]);
  return (
    <FormContext>
    <Form onSubmit={handleSubmit(submit)} data-testid='form'>
      <Input
        type='text'
        name='title'
        label='Titel'
        ref={register({ required: true })}
        error={errors.title}
      />
      <InputWithDatalist
        type='text'
        name='gameType'
        label='Ange spel'
        ref={register({ required: true })}
        error={errors.gameType}
        listArray={dataSource}
      />
      <Input
        type='text'
        name='diceNumber'
        label='Antal tärningar'
        ref={register({
          required: true,
          pattern: { value: /^[0-9]$/, message: 'Måste vara en siffra' },
        })}
        error={errors.diceNumber}
      />
      <DiceContainer>
        <DiceButton
          label='Prickar'
          activeClass={diceType === 'dots' ? true : false}
          icon='dice-five'
          onClick={() => setDiceType('dots')}
        />
        <DiceButton
          label='Siffror'
          activeClass={diceType === 'numbers' ? true : false}
          icon='dice-five'
          onClick={() => setDiceType('numbers')}
        />
      </DiceContainer>
      <GeneralButton type='submit'>Starta spel</GeneralButton>
    </Form>
    </FormContext>
  );
};

**The test that is failing is as follows:**

const storeData = { some store data }
const mockStore = configureMockStore();
const store = mockStore(storeData);
  
it('testing', async () => {
    const props = {
          // props
}
    const onSubmit = jest.fn();
    const {
      getByTestId,
    } = render (
          <Provider store={store}>
           <FormContext>
          <CreateNewGame {...props} submit={onSubmit} />
        </FormContext>
      </Provider>
    );
    const form = getByTestId('form');
    fireEvent.submit(form);
    expect(onSubmit).toHaveBeenCalled();
  });

**Error I am getting is as follows:
expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0**

[bluebill1049]

maybe this is useful: https://react-hook-form.com/advanced-usage#TestingForm
https://claritydev.net/blog/testing-react-hook-form-with-react-testing-library/

[poojan1296-eng]

Thanks a ton for helping out. However, after referring to the links that you gave, I am still facing the same discrepancy. I tried using waitFor() but no luck. It seems that the submit function is not getting called at all. Any help is highly appreciated!

[SpadarShut]

For people coming here from search, had this issue multiple times using testing-library. Usually this was fixed when I added code to click the page or to click some input and then the page. This would trigger validation on input blur.

// do the changes needed in test:
await userEvent.type(screen.getByLabelText('some input to change value'), 'new value');

// this can be needed when just clicking body isn't enough to trigger validation
// await userEvent.click(screen.getByLabelText('some input'));

// click body to blur input and trigger validation:
await userEvent.click(document.body);

[Sbabureddy]

Hi @SpadarShut ,

I'm also facing similar issue. Can you look into the below codesandbox link: https://codesandbox.io/s/react-hook-form-unit-test-act-warning-docs-forked-v5movd?file=/src/App.test.js

[SpadarShut]

@Sbabureddy it should be something like this https://codesandbox.io/s/react-hook-form-unit-test-act-warning-docs-forked-yohgje?file=/src/App.test.js:457-467

[Sbabureddy]

No your wrong @SpadarShut , there is no need to pass onSubmit as prop all the time right. and even your test case is also failing because of the above reason. Can you provide a simple example of testing useForm component.

[Sbabureddy]

@SpadarShut @bluebill1049 can you make this example form submission handler success.
https://codesandbox.io/s/react-hook-form-unit-test-act-warning-docs-tcb7y?file=/src/App.test.js