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

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

...

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

This ponent 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-ponent';

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?

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

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

...

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

This ponent 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-ponent';

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?

• javascript
• reactjs
• typescript
• react-testing-library
• react-hook-form

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

3 Answers 3

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

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

control came from useForm:

const { control } = useForm();

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

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