React中如何测试函数组件是否调用特定自定义Hook？

我当前的实现非常基础，想要测试自定义Hook useEmailMultiSelectCombobox 是否被目标函数组件 EmailMultiSelectCombobox 调用/初始化。我的诉求是能够将自定义Hook与视图层分开进行真正的单元测试，而非像常见方案那样，使用Testing Library的user-events库将组件视图层与逻辑层一起做集成测试。

相关代码实现 #

测试代码

describe("UI Logic", () => {
    it("Uses useEmailMultiSelectCustomHook", () => {
        const component = render(<EmailMultiSelectCombobox/>);
        const hook = jest.mock("./useEmailMultiSelectCombobox", () => ({
            useEmailMuliSelect: () => {
                return {
                    initialConditions: ["test", "test1", "test2"]
                }
            }
        }));
        
        const hookTest = renderHook(useEmailMultiSelectCombobox);
        expect(hookTest).toHaveBeenCalledTimes(1);
    });
})

目标组件代码

export const EmailMultiSelectCombobox = () => {
    const { initialConditions } = useEmailMultiSelectCombobox();
    
    
    return (
        <>
            {/*<MultiSelectCombobox initialConditions={} handleSelectionChange={}/>*/}
        </>
    );
};

自定义Hook代码

export const useEmailMultiSelectCombobox = () => {
    const [initialConditions, setInitialConditions] = useState<Array<string>>([]);
    
    
    return { initialConditions };
}

解决方案 #

要单独测试组件是否调用了自定义Hook，你可以通过Jest的mock功能拦截Hook的导出，再验证它的调用情况，具体修正和实现步骤如下：

1. 修正mock的错误并调整时机 #

你原代码里存在拼写错误（useEmailMuliSelect应为useEmailMultiSelectCombobox），且mock时机不对——必须在组件渲染前完成mock，才能让组件用上mock版本的Hook。

2. 验证mock函数的调用 #

不需要使用renderHook（它是用来测试Hook本身的），渲染组件后直接断言mock的Hook调用次数即可。

修正后的测试代码：

// 提前mock整个Hook模块，放在测试文件顶部
jest.mock("./useEmailMultiSelectCombobox", () => ({
  useEmailMultiSelectCombobox: jest.fn(() => ({
    initialConditions: ["test", "test1", "test2"]
  }))
}));

describe("UI Logic", () => {
  it("调用了useEmailMultiSelectCombobox Hook", () => {
    // 引入mock后的Hook
    const { useEmailMultiSelectCombobox } = require("./useEmailMultiSelectCombobox");
    
    // 渲染目标组件
    render(<EmailMultiSelectCombobox />);
    
    // 断言Hook被调用了一次
    expect(useEmailMultiSelectCombobox).toHaveBeenCalledTimes(1);
  });
});

关键说明 #

• mock优先级：把jest.mock放在测试文件最顶部，确保组件导入Hook时，拿到的已经是mock版本。
• 聚焦测试目标：我们要验证的是组件与Hook的调用关系，而非Hook的内部逻辑，所以只需要断言mock函数的调用次数即可，完全不需要涉及视图层交互。
• 拼写检查：原代码中mock的Hook名称拼写错误，这会导致无法正确拦截Hook调用，修正后才能正常捕获调用行为。

这样就能实现纯单元测试，彻底将自定义Hook与视图层的测试分离。

内容的提问来源于stack exchange，提问作者Bryant Wooters