来自 react-hook-forms 的 FormContext 在 testing-library-react 中导致错误

Question

在尝试运行我的测试时，FormContext 出现了一个奇怪的错误。我要做的就是渲染一个组件。

所以这是我得到的错误，这是我写的测试。

import React from 'react';
import UserReportQuestion from './UserReportQuestion';
import { render } from '@testing-library/react';
import { useForm, FormContext } from 'react-hook-form';

describe('(Component) UserReport', () => {
  let UserReportQuestionRender; 

  // jest.mock('react-hook-form', () => ({ 
  //   FormContext: jest.fn(),
  //   useForm: jest.fn(),
  //  }));

  beforeEach(() => {
    const form = useForm();

    UserReportQuestionRender = render(
      <FormContext {...form}>
        <UserReportQuestion />
      </FormContext>
    )
  }); 

  it('Should render without crashing', () => {
    expect(UserReportQuestionRender);
  });
}); 

在我正在测试的组件中，我使用了 FormContext 并将它传递给 useForm 作为它的方法。我已经将其他所有内容都注释掉了，所以它只是组件中的 FormContext 以确保它是 100% 导致错误的。

想知道是否有人对如何解决这个问题有任何想法？

用组件更新

  import { useForm, FormContext } from "react-hook-form";

  const UserReportQuestion = ({ text }) => {
  const { t } = useTranslation();
  const [isModalOpen, setModal] = useState(false);
  const methods = useForm();

  return (
    <>
      <Question>
        {t('UserReport.criteria')}:
        {' '}
        {/* Placeholder text */}
        {/* {text} */}
        Find new, creative ways of completing tasks

        <ModalIcon onClick={() => setModal(true)}>
          <Icon
            icon="info"
            color="#a3a3a3"
            modifiers={['size-large', 'solid']}
          />
        </ModalIcon>
      </Question>
      <InfoModal
        isModalOpen={isModalOpen}
        closeModal={() => setModal(false)}
        title={t('UserReport.modalTitle')}
      >
        <FormContext {...methods}>
          {/* <form onSubmit={methods.handleSubmit()}>
            <InfoModalParagraph>
              {t('UserReport.modalDescription')}
            </InfoModalParagraph>
            <FeedbackQuestions 
              questions={mockData}
              selfAssessment={false}
              submitButtonDisabled
              noSubmitButton
            /> 
          </form> */}
        </FormContext>
      </InfoModal>
    </>
  );
}

Answer 1

我认为您正在导入一个不存在的组件，在react-hook-form 文档中，如果我们想使用useFormContext，我们有一个FormProvider。

在此处阅读更多信息：https://react-hook-form.com/api/#useFormContext

但同时你需要改变

import {FormContext} from 'react-hook-form'

到这里：

import { FormProvider } from 'react-hook-form'