npm link引入React库后Jest测试多轮报错及配置无效问题

1. 先解决「多React副本」核心问题 #

这是触发无效Hook调用的根本原因——npm link的库若自身node_modules包含React，会和主应用的React形成两个独立实例，违反Hook规则。

• 把库项目里的react和react-dom从dependencies移至devDependencies，库本身不应自带React，需依赖宿主应用的实例。
• 在库项目中执行：

  npm link ../主应用路径/node_modules/react
  npm link ../主应用路径/node_modules/react-dom
  

  让库开发时直接复用主应用的React副本，避免重复实例。

2. 修复webpackChunk_my_library报错 #

该错误源于库用Webpack打包生成了特定chunk命名，Jest默认无法识别这类Webpack全局变量。

• 调整Jest的transformIgnorePatterns，不要直接忽略整个库，反而要让Jest转译你的库代码：

  module.exports = {
    // ...其他配置
    transformIgnorePatterns: [
      '/node_modules/(?!myLibrary)/' // 仅忽略node_modules中除目标库外的内容
    ]
  };
  

• 若库用Webpack打包，建议切换为Rollup输出UMD/CommonJS格式——Webpack的chunk模式更适配应用，库打包用标准格式可避免Jest识别Webpack全局变量的问题。

3. 修复react__WEBPACK_IMPORTED_MODULE_3__.memo is not a function报错 #

该问题多因React版本不匹配或moduleNameMapper配置异常导致：

• 确认主应用与库的React、ReactDOM版本完全一致，版本差异会导致memo这类API无法被正确识别。
• 调整Jest的moduleNameMapper配置，可直接移除React相关映射（已通过npm link解决多副本问题）：

  module.exports = {
    // ...其他配置
    moduleNameMapper: {
      "\\.(css|postcss|less)$": "identity-obj-proxy"
      // 移除react/react-dom的硬编码映射，避免路径错误
    }
  };
  

• 优化库的Webpack externals配置，适配Node环境（Jest运行在Node）：

  externals: {
    react: 'commonjs react',
    'react-dom': 'commonjs react-dom'
  }
  

4. 最终验证步骤 #

1. 清理主应用与库的node_modules，重新执行npm install
2. 在库项目执行npm link，主应用执行npm link myLibrary
3. 重新运行Jest测试，确认所有报错消失

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