链接库破坏 Jest 测试

Question

我们已经编写了一个在另一个应用程序中使用的 React 库。 当我使用npm link../myLibrary时，运行 Jest 测试将失败并显示以下消息：

TypeError: Cannot read property 'webpackChunk_my_library' of undefined

我可以通过编辑我的 Jest 配置来解决这个问题：

"transformIgnorePatterns": [
  "../myLibrary"
],

但这会产生其他问题......

 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)                                                 
    2. You might be breaking the Rules of Hooks                     
    3. You might have more than one copy of React in the same app   
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

在 Webpack 中，我为 React 和 ReactDOM 添加了别名，并修复了它以便正常工作。 我尝试通过编辑 Jest 配置来做类似的事情：

"moduleNameMapper": {
  "\\.(css|postcss|less)$": "identity-obj-proxy",
  "react": "<rootDir>/node_modules/react",
  "react-dom": "<rootDir>/node_modules/react-dom"
},

现在我得到另一个问题......

TypeError: react__WEBPACK_IMPORTED_MODULE_3__.memo is not a function

我已经尝试了以上所有的变体，但我无法找出正确的组合。 在我的图书馆的 Webpack 配置中，我有这个设置（如果它有所不同）：

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

Answer 1

原来 Jest 正在为moduleNameMapper使用正则表达式模式。 更改为以下内容后，它工作正常：

"transformIgnorePatterns": [
  "../myLibrary"
],
"moduleNameMapper": {
  "\\.(css|postcss|less)$": "identity-obj-proxy",
  "^react$": "<rootDir>/node_modules/react",
  "^react-dom$": "<rootDir>/node_modules/react-dom"
},