使用 react-hook-form 时无法测试 onSubmit答案

【问题标题】：Not being able to test onSubmit while using react-hook-form使用 react-hook-form 时无法测试 onSubmit
【发布时间】：2020-11-08 23:00:59
【问题描述】：

我在编写单元测试用例以检查提交函数是否被调用时遇到问题。我面临的问题与以下问题类似： https://spectrum.chat/react-hook-form/help/solved-testing-the-onsubmit~364b8d79-c2f2-4d1c-a3ae-d56fed134128

但是，我使用的代码结构略有不同，因为我没有直接返回“表单组件”，而是返回包裹在“FormContext”中的“表单组件”。

  export const CreateNewGame = () => {
  const [diceType, setDiceType] = useState(null);
  const { handleSubmit, register, errors, reset } = useForm({
    mode: 'onChange',
  });
  const submit = (data) => {
    console.log(data);
    reset({
      title: '',
      gameType: '',
      diceNumber: '',
    });
  };
  const dataSource = [
    'Settlers',
    'Catan',
    'Pandemic',
    'Ticket to Ride',
    'Risk',
    'Yatzy',
    'Dungeon and Dragons',
  ];
  useEffect(() => {}, [diceType]);
  return (
    <FormContext>
    <Form onSubmit={handleSubmit(submit)} data-testid='form'>
      <Input
        type='text'
        name='title'
        label='Titel'
        ref={register({ required: true })}
        error={errors.title}
      />
      <InputWithDatalist
        type='text'
        name='gameType'
        label='Ange spel'
        ref={register({ required: true })}
        error={errors.gameType}
        listArray={dataSource}
      />
      <Input
        type='text'
        name='diceNumber'
        label='Antal tärningar'
        ref={register({
          required: true,
          pattern: { value: /^[0-9]$/, message: 'Måste vara en siffra' },
        })}
        error={errors.diceNumber}
      />
      <DiceContainer>
        <DiceButton
          label='Prickar'
          activeClass={diceType === 'dots' ? true : false}
          icon='dice-five'
          onClick={() => setDiceType('dots')}
        />
        <DiceButton
          label='Siffror'
          activeClass={diceType === 'numbers' ? true : false}
          icon='dice-five'
          onClick={() => setDiceType('numbers')}
        />
      </DiceContainer>
      <GeneralButton type='submit'>Starta spel</GeneralButton>
    </Form>
    </FormContext>
  );
};

失败的测试如下：

it('testing', async () => {
    const props = {
          // props
}
    const onSubmit = jest.fn();
    const {
      getByTestId,
    } = render (
          <Provider store={store}>
           <FormContext>
          <CreateNewGame {...props} submit={onSubmit} />
        </FormContext>
      </Provider>
    );
    const form = getByTestId('form');
    fireEvent.submit(form);
    expect(onSubmit).toHaveBeenCalled();
  });

我得到的错误如下：

expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

【问题讨论】：

标签： reactjs unit-testing react-testing-library react-hook-form react-forms

【解决方案1】：

在您的 CreateNewGame 组件中，您将 submit 属性传递给 <CreateNewGame {...props} submit={onSubmit} /> - 在您的测试中，它包含对 jest.fn() 模拟的引用 - 但在组件定义本身中，组件不接受任何道具.

【讨论】：