如何Mock自定义Hook导出函数？测试遇TypeError问题求助

问题原因 #

你遇到的TypeError: (0 , _useStartGame2.default) is not a function错误，本质是Mock的导出方式和自定义Hook实际导出方式不匹配。从错误信息判断，你的组件是通过默认导入引入useStartGame的，但你编写的Mock只提供了命名导出，未正确设置默认导出。

解决方案 #

根据Hook的实际导出方式，分两种场景处理：

场景1：Hook为默认导出（最常见情况） #

如果你的Hook代码末尾是export default useStartGame;，修改Mock代码如下：

jest.mock('@src/hooks/useStartGame', () => ({
  __esModule: true, // 必须添加，标记为ES模块
  default: () => {
    return { startGame: jest.fn() };
  },
}));

关键说明：

• __esModule: true：告知Jest这是ES模块语法，确保默认导入逻辑能被正确解析。
• default属性：对应组件中import useStartGame from '@src/hooks/useStartGame'的默认导入规则，保证Mock的Hook能被组件正确识别为函数。

场景2：Hook为命名导出 #

如果你的Hook采用命名导出（比如export const useStartGame = () => {...}），需确保组件中使用命名导入：

// 组件中的导入语句
import { useStartGame } from '@src/hooks/useStartGame';

此时你原本的Mock写法是正确的，若仍报错，检查是否误将组件中的导入写成了默认导入。

验证方法 #

可在测试代码开头添加打印，确认Mock后的Hook是否符合预期：

import useStartGame from '@src/hooks/useStartGame';
console.log(useStartGame); // 正常应输出一个函数

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