代码之家  ›  专栏  ›  技术社区  ›  Leo Messi

在使用react测试库进行测试时,如何模拟react hook表单的元素?

  •  0
  • Leo Messi  · 技术社区  · 3 年前

    有一个基本的组件,它使用反应钩的形式:

    const{handleSubmit,reset,control}=useForm({ 解析程序:yupResolver(模式) });

    ...

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

    这个组件有3个道具,标题-字符串,打开-函数,控件-不知道是什么,所有这些都是必需的。

    所以,在为它编写测试时,我被困在这里:

    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 这次考试会被嘲笑吗?

    0 回复  |  直到 3 年前
        1
  •  0
  •   Joris    3 年前

    control 来自 useForm :

    const { control } = useForm();

    使用时需要进行控制 Controller useController 医生: https://react-hook-form.com/api/usecontroller

    我想 TaskModal 组件是一种形式。我建议将表单放在模态中,这样测试会更容易,否则您可以用表单包装组件(TaskModal)进行测试。

    推荐文章