How to mock the elements of react-hook-form when testing with react-testing-library?

Question

Having a basic component which uses react-hook-form:

const { handleSubmit, reset, control } = useForm({ resolver: yupResolver(schema) });

...

  <MyComponent
    title='title'
    open={isOpened}
    control={control}
  />

This component has 3 props, title - a string, open - a function, control - no idea what is it, all of them mandatory.

So, when writing a test for it I got stuck here:

import { render } from '@testing-library/react';

import '@testing-library/jest-dom';
import MyComponent from './my-component';

describe('MyComponent', () => {
  const title = 'title';
  it('should render successfully', () => {
    const { baseElement, getByText } = render(
      <TaskModal
        title={title}
        open={jest.fn()}
        control={} // what should be written here?
      />
    );
    expect(baseElement).toBeTruthy();
    expect(getByText(title)).toBeTruthy();
  });

How can control be mocked for this test?

Dextrorse

Where does control come from? You should at least provide where the control variable is defined or imported from what module – Flaxseed

Answer 1

If anyone is getting any error while using hooks inside tests, try renderHook from testing-library/react:

import { render, renderHook } from '@testing-library/react'        

const { result } = renderHook(() => useForm())

render(
  <TextField control={result.current.control} />
)

Autarch

I also used the above suggestion to build a mock control that I can pass into my component in Storybook like so: SORRY FOR THE NO FORMATTING import { renderHook } from "@testing-library/react" import { useForm } from "react-hook-form" const { result } = renderHook(() => useForm()) const mockControl = result.current.control export default mockControl – Khmer

Answer 2

Maybe just passing in the real control from useForm, like they are doing in react-hook-form's testing. https://github.com/react-hook-form/react-hook-form/blob/master/src/__tests__/useController.test.tsx

Loiret

Answer 3

control came from useForm:

const { control } = useForm();

Control is necessary when you use Controller or useController The doc: https://react-hook-form.com/api/usecontroller

I suppose the TaskModal component is in a form. I recommend to put the form inside the modal and it would be easier to test otherwise you can wrap your component (TaskModal) with a form for your test.

Mekong

here is the whole code for the modal: pastebin.com/khvn3Vq5, here is the test: pastebin.com/JFfJkNRT, I've added the changes suggested by you but it still fails, returning 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 reactjs.org/link/invalid-hook-call – Dextrorse

Please, read the documentation to know how to write test with react-hook-form: react-hook-form.com/advanced-usage#TestingForm – Mekong