Unit testing error when passing useForm parameters as props .

[erkanisuf]

I have this <CustomInput /> component that basically renders input field. I pass props to it {errors , register ,setValue} . But when i try to unit test i get an error.

The component is very basic its pretty much like this:

<input
                {...props.register(name, {onChange: (e: React.ChangeEvent<HTMLInputElement>) => props.onChange && props?.onChange(e)})}
                className={`form-control`}
                type="text"
                id={attribute.externalKey}
                data-testid={attribute.externalKey}/>
{props.errors && props.errors[key].message }

My test looks like this:

    it('Render of <CustomInput />', () => {
        const {register, handleSubmit, formState: {errors}, setValue, getValues, control} = useForm();
        const getValue = (): boolean => {
            return true;
        }
        const {getByTestId, findByText, findByRole} = render(<div><CustomInput attribute={attribute}
                                                                               errors={errors}
                                                                               register={register}
                                                                               setValue={setValue}/></div>);

        expect(findByRole("input")).toBeInTheDocument()
    });

But i am getting this error:

   Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

| describe("Test custom attributes  renders correctly", () => {
       9 |     it('Render of <CustomInput />', () => {
    > 10 |         const {register, handleSubmit, formState: {errors}, setValue, getValues, control} = useForm();
         |                                                                                                    ^
      11 |         const getValue = (): boolean => {
      12 |             return true;
      13 |         }

[erkanisuf]

I did this test passes but not sure if its right approach.

jest.mock('react-hook-form', () => ({
    ...jest.requireActual('react-hook-form'),
    useForm: () => ({
        handleSubmit: () => jest.fn(),
        register: jest.fn(),
        control: {
            register: jest.fn(),
            unregister: jest.fn(),
            getFieldState: jest.fn(),
            _names: {
                array: new Set('test'),
                mount: new Set('test'),
                unMount: new Set('test'),
                watch: new Set('test'),
                focus: 'test',
                watchAll: false,
            },
            _subjects: {
                watch: jest.fn(),
                array: jest.fn(),
                state: jest.fn(),
            },
            _getWatch: jest.fn(),
            _formValues: ['test'],
            _defaultValues: ['test'],
        },
        getValues: () => {
            return [];
        },
        setValue: () => jest.fn(),
        formState: () => jest.fn(),
        watch: () => jest.fn(),
    }),
    Controller: () => [],
    useSubscribe: () => ({
        r: {current: {subject: {subscribe: () => jest.fn()}}},
    }),
}))

[bluebill1049]

ideally you should not mock react hook form package, if you need to see some example check out the library test folder.

[NikkiMather]

I have the same issue as OP and came here via Google. Unless i'm missing something, this is a highly unhelpful answer. I looked through most of the tests and none cover the case where you're passing register, errors etc as props to a component, then using that component to render the input with its props. I'm getting the same error as OP, as I'm trying to pass in the things the input component expects (i.e. errors, register etc).

If you had a test for this file (https://github.com/react-hook-form/react-hook-form/blob/master/examples/V7/customInput.tsx), then that would be perfect, but there is not and your documentation doesn't cover any of this either in your tests.

[geoffpowdrellchde]

I used the approach above and noticed that you set Controller: () => []
If you do that it will only display the html labels and none of the form controls inside the form. Making it impossible to test any of your form controls.
Use the renderHook from the @Testing-library-react

Example:

 const values: AppEditFormData = {
    userAuthInfo: {
       acr: '',
       citizenAuthentication: true,
       allowedIdps: '',
       serviceName: '',
      requiredConsent: '',
      subjectIdentifier: '',
   },
 }

const formSchema = yup.object({
   userAuthInfo: appUserAuthInfoSchema,
   supportInfo: resourceSupportInfoSchema,
 })
const resolver = yupResolver(formSchema)

test('Check the form', async () => {
   const { result } = renderHook(() =>
     useForm<AppEditFormData>({
        values,
        resolver,
        mode: 'all',
        reValidateMode: 'onBlur',
     })
  )

act(() => {
  expect(result.current).toBeDefined()
})

render(
  <FormProvider {...result.current}>
    <TabContext value={ApplicationTab.UserAuthenticationTab}>
      <ApplicationEditUserAuthenticationTab
        tabPanelValue={ApplicationTab.UserAuthenticationTab}
        isEditable={true}
      />
    </TabContext>
  </FormProvider>
)

await waitFor(() => {
  expect(screen.getByRole('tabpanel')).toBeInTheDocument()
})

expect(result.current.getFieldState('userAuthInfo.acr')).toEqual({
  error: { message: 'userAuthInfo.acr is a required field', ref: { name: 'userAuthInfo.acr' }, type: 'required' },
  invalid: true,
  isDirty: false,
  isTouched: false,
})

}

... Now you can validate your FormControls within the form