Tener un componente básico que usa la forma de gancho de reacción:
const { handleSubmit, reset, control } = useForm({ resolver: yupResolver(schema) });
...
<MyComponent title='title' open={isOpened} control={control} />Este componente tiene 3 accesorios, título - una cadena, abierto - una función, control - no tengo idea de qué es, todos ellos obligatorios.
Entonces, al escribir una prueba para ello, me quedé atascado aquí:
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(); }); ¿Cómo se puede burlar el control para esta prueba?
Tal vez simplemente pasando el control real de useForm , como lo están haciendo en las pruebas de react-hook-form. https://github.com/react-hook-form/react-hook-form/blob/master/src/__tests__/useController.test.tsx
control vino de useForm :
const { control } = useForm();
El control es necesario cuando usa Controller o useController El documento: https://react-hook-form.com/api/usecontroller
Supongo que el componente TaskModal está en un formulario. Recomiendo colocar el formulario dentro del modal y sería más fácil probarlo; de lo contrario, puede envolver su componente (TaskModal) con un formulario para su prueba.