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?
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
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.