使用react-hook-form

问题描述

我在编写单元测试用例以检查是否正在调用Submit函数时遇到问题。我面临的问题与以下问题类似： 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

解决方法

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