使用 react-testing-library 进行测试时如何模拟 react-hook-form 的元素？

Question

拥有一个使用 react-hook-form 的基本组件：

const { handleSubmit, 重置, 控制 } = useForm({ 解析器：yupResolver(schema) });

...

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

这个组件有 3 个 props，title - 一个字符串，open - 一个函数，control - 不知道是什么，都是必填项。

因此，在为它编写测试时，我陷入了困境：

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();
  });

control 怎么能被这个测试模拟？

Answer 1

control 来自useForm：

const { control } = useForm();

使用Controller 或useController 时需要控制 文档：https://react-hook-form.com/api/usecontroller

我想TaskModal 组件在一个表单中。我建议将表单放在 modal 中，这样会更容易测试，否则您可以使用表单包装您的组件（TaskModal）以进行测试。