FormContext from react-hook-forms causing error in testing-library-react - react-testing-library

Question

Got an odd error with FormContext when trying to run my tests. All I'm trying to do is render a component.
So this is the error that I am getting and this is the test that I have written.
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);
});
});
In the component I am testing I am using FormContext and passing it useForm as its methods. I've commented everything else out so it is just the FormContext in the component to make sure that it is 100% this that is causing the error.
Wondering if anyone has any ideas on how to work round this?
Update with component
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

I think you're importing a component which doesn't exist, in the react-hook-form documentation we have a FormProvider if we want to use useFormContext.
read More about it here: https://react-hook-form.com/api/#useFormContext
but in the mean time you need to change
import {FormContext} from 'react-hook-form'
to this:
import { FormProvider } from 'react-hook-form'