我在一个子组件中使用useFormContext。这是它的代码:
const { register } = useFormContext<CustomerProfileFormData>();
我怎样才能模拟useFormContext,以便我可以测试子组件。这是测试
it('should render properly', () => {
render(<AddressDetails isEdit={false} />);
expect(screen.getByTestId('address-details')).toBeInTheDocument();
});
我得到这个错误TypeError:无法解构“(0,_reactHookForm.useFormContext)(...)”的属性“register”,因为它是null.Jest。
这是有道理的,因为我没有模仿useFormContext。我怎么能模仿它呢?任何帮助将不胜感激。
4条答案
按热度按时间7uzetpgm1#
您可以模仿其他响应中指示的上下文方法,或者可以通过在测试中创建一个特殊的 Package 器组件来为组件提供实际的FormContext,如下所示:
如果你想验证你的组件在表单值上的行为是否正确,你可以用预先配置的数据覆盖
getValues
方法。tyg4sfes2#
为了使
useFormContext
方法在测试中工作,RHF建议使用<FormProvider>
(Github-How to Test FormProvider / useFormContext) Package 它。使用
<FormProvider>
Package 您的组件,并提供如下所需的方法:qeeaahzv3#
我找到了一个适合我的解决方案:
velaa5lx4#
要模拟react-hook-form v7,您可以执行以下操作