Lerna Monorepo中React组件Jest测试遇Invalid Hook Call错误

• 确认组件导入路径准确性
  检查测试文件中Login组件的导入路径是否指向正确文件。在Lerna多包结构中，若Login属于子package，需避免路径指向其他package的同名组件或错误位置。例如测试文件在packages/auth/__tests__/Login.test.js、组件在packages/auth/src/components/Login.jsx时，../src/components/Login路径是正确的；若组件在packages/ui/src/components/Login.jsx，则需调整为@your-org/ui/src/components/Login（替换@your-org/ui为对应package的name字段值）。

• 配置Jest强制使用单份React依赖
  即使排除了多副本问题，Lerna的依赖提升仍可能在测试环境出现解析偏差。在项目根目录或子package的jest.config.js中添加以下配置，强制Jest从根目录node_modules加载React：

  module.exports = {
    // 其他配置项...
    moduleNameMapper: {
      '^react$': '<rootDir>/node_modules/react',
      '^react-dom$': '<rootDir>/node_modules/react-dom'
    }
  };
  

• 让Jest转译内部子package代码
  Lerna项目中，子package代码会被安装到根目录node_modules下，而Jest默认不转译node_modules内的文件。若Login所在子package使用了未转译的ES语法（如JSX、Hook），会导致测试环境解析异常。修改jest.config.js的transformIgnorePatterns，让Jest转译你的内部packages：

  module.exports = {
    // 其他配置项...
    transformIgnorePatterns: [
      'node_modules/(?!(@your-org|your-package-prefix)/)'
    ]
  };
  

  将@your-org或your-package-prefix替换为你项目的package命名前缀。

• 验证组件导出与导入的匹配性
  检查Login组件的导出方式：

  • 若为默认导出：export default Login;，则import Login from '../src/components/Login'是正确的。
  • 若为命名导出：export const Login = () => {};，则需改为import { Login } from '../src/components/Login'。
    不匹配的导出/导入会导致组件被当作普通函数调用，触发Hook规则错误。

• 重新执行Lerna依赖安装
  运行lerna bootstrap --hoist重新安装所有依赖，确保React、React DOM等核心依赖被正确提升到根目录node_modules，避免子package出现独立的依赖副本。

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