React - How to mock useFormContext (react-hook-form)

Question

I am using useFormContext in one the child component. this is the code for it:

const { register } = useFormContext<CustomerProfileFormData>();

How can I Mock useFormContext so that I can test child component. this is the test

it('should render properly', () => {
    render(<AddressDetails isEdit={false} />);
    expect(screen.getByTestId('address-details')).toBeInTheDocument();
});

I am getting this error TypeError: Cannot destructure property 'register' of '(0 , _reactHookForm.useFormContext)(...)' as it is null.Jest.

which makes sense since I did not mock useFormContext . How can I Mock it? any help will be appreciated.

Answer 1

You can either mock the context methods as indicated in other responses, or you can provide your component with an actual FormContext by creating an ad hoc wrapper component inside your test like this:

it('should do something', () => {
  const Wrapper = (props) => {
    const formMethods = useForm<CustomerProfileFormData>();

    return (
      <FormProvider {...formMethods}>
        {props.children}
      </FormProvider>
    );
  };

  render(
    <Wrapper>
      <AddressDetails />
    </Wrapper>
  );

  // your assertions here ... 
})

If you want to verify that your components behaves correctly upon form values, you could e.g. override the getValues method with preconfigured data.

const mockedGetValues = (key: string) => {
   // return test data for form key
}

return (
  <FormProvider {...formMethods} getValues={mockedGetValues}>
    {props.children}
  </FormProvider>
);