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?

Where does control come from? You should at least provide where the control variable is defined or imported from what module — Lin Du
– Lin Du, Commented Dec 22, 2021 at 2:00

Lucas Ferreira · Accepted Answer · 2022-10-23 16:38:58Z

8

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} />
)

edited Oct 23, 2022 at 16:38

answered Oct 23, 2022 at 16:36

Lucas Ferreira

811 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alengel Over a year ago

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

Sum. T · Accepted Answer · 2022-06-15 02:05:59Z

1

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

answered Jun 15, 2022 at 2:05

Sum. T

154 bronze badges

Comments

Joris · Accepted Answer · 2021-12-22 08:07:26Z

0

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.

answered Dec 22, 2021 at 8:07

Joris

2,83618 silver badges21 bronze badges

2 Comments

Leo Messi Over a year ago

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

Joris Over a year ago

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

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related