Problem with simulated click-submit button in react-hook-form tests

[SofiaBManzano]

Hello,

I'm having problems testing a component that uses react-hook-form. My component includes a submit button (FormSubmitButton) which, when clicked, should call a submit function.

Here is the relevant code from my component:

<Form defaultValues={initialValues}>
  <Modal.Body>
    {/* ...other form fields... */}
  </Modal.Body>
  <Modal.Footer>
    <FormSubmitButton
      disabled={!isSubmitEnabled}
      submit={submit}
      loading={submitting}
      data-testid="form-submit-button"
    >
      {t('form.save')}
    </FormSubmitButton>
  </Modal.Footer>
</Form>

And here is the submit function:

  const submit = useCallback((submitedJobConfig: JobConfig) => {
    console.log('handleSubmit called with:', submitedJobConfig);
  // ...preparation code...
      const functionExec = createMode ? createJob : updateJob

      functionExec(request)
        .then(() => {
          onClose?.(true)
        })
        .catch(() => { })
        .finally(() => setSubmitting(false))
    }
    else {
      AppLogger.error('Could not create job config request.')
    }
  }, [currentProject, createMode, createJob, updateJob, onClose]);

In my test, I'm simulating a click on the submit button and then waiting for a mock function (useJobConfigsUpdateMock.__muteAsync) to be called. Here is the relevant code from my test:

    it(`and the cron expression is NOT defined then updateJob is called`, async () => {
      const jobConfig = {
        id: '1',
        projectId: 1,
        jobType:....
      }
      render(<JobConfigEditorModal jobConfig={jobConfig} />, initializeStateFn(1))

      const checkbox = await screen.findByTestId('isPaused')
      fireEvent.click(checkbox)

      const submitButton = await screen.findByTestId('form-submit-button')
      await waitFor(() => expect(submitButton).not.toBeDisabled())

      // Simulate the click event
      fireEvent.click(submitButton)

      // Wait for any async actions to complete
      waitFor(() => expect(useJobConfigsUpdateMock.__mutateAsync).toHaveBeenCalledTimes(1))

      expect(useJobConfigsUpdateMock.__mutateAsync).toHaveBeenCalledWith(
        expect.objectContaining({ ...jobConfig, jobData: JSON.stringify(jobConfig.jobData) })
      )
    })

The problem is that, although the submit button is clicked in the test, the useJobConfigsUpdateMock.__muteAsync function is never called. I've checked that the submit button isn't disabled before clicking it, and I've tried using waitFor to wait for any asynchronous actions to complete before checking if useJobConfigsUpdateMock.__mutateAsync has been called, but nothing seems to work.

In addition, I've added some console.log statements in my FormSubmitButton component to try to debug the problem. Here is the relevant code from that component:

const handleClick = () => {
  console.log(‘Button clicked’);
  if (onClick) {
    console.log(‘onclick’);
    onClick(submit);
  } else {
    console.log(‘yeee’, handleSubmit(submit));
    const submitForm = handleSubmit(submit);
    submitForm();
  }
}

When I run my test, I see the console messages ‘Button clicked’ and ‘yeeeee [AsyncFunction (anonymous)]’, indicating that the button is being clicked and the handleSubmit(submit) function is being called. However, I don't see the console message ‘handleSubmit called with:’, which should be printed at the beginning of the submit function. This suggests that the submit function is not being called as expected.

Does anyone have any idea why this might be happening and how I can fix it?

Thanks in advance for any help you can provide.