React -如何模拟useFormContext (react-hook-form)

Question

我在一个子组件中使用了useFormContext。这是它的代码：

const { register } = useFormContext<CustomerProfileFormData>();

如何模拟useFormContext以便测试子组件。这就是测试

it('should render properly', () => {
    render(<AddressDetails isEdit={false} />);
    expect(screen.getByTestId('address-details')).toBeInTheDocument();
});

我收到此错误寄存器:无法对'(0，_reactHookForm.useFormContext)(...)‘的属性’TypeError‘进行结构分析因为它是null.Jest。

这是有道理的，因为我没有嘲笑useFormContext。我怎么才能模拟它？任何帮助都将不胜感激。

Answer 1

您必须提供一个上下文才能将其作为单元测试使用。如果您需要对这个特定的AddressDetails组件进行“单元测试”，那么可以为它模拟一些上下文。如果没有更多与您的组件相关的上下文，我无法给您一个具体的答案。当涉及到上下文时，我通常会添加一个模拟包装组件。对于"react-hook-form“，似乎暴露了一些方法。如果你想模仿那些进行单元测试的人，那么就这样做：

jest.mock("react-hook-form", () => ({
  ...jest.requireActual("react-hook-form"),
  register: jest.fn(),
  handleSubmit: jest.fn(),
  // ...whatever APIs you use in your component
}))

如果您想要测试您的组件是否与您的供应商包“集成”，那么您将尝试运行“集成测试”。在这种情况下，我建议阅读您使用的供应商库的文档。在向社区咨询之前，请阅读您的供应商非常全面的documentation。在这些文档中，他们似乎花了很大力气来回答你的问题。

Answer 2

我找到了一个适合我的解决方案：

jest.mock("react-hook-form", () => ({
    ...jest.requireActual("react-hook-form"),
    useFormContext: () => ({
        handleSubmit: () => jest.fn(),
        getValues: () => jest.fn(),
    }); 
}));