monorepo 包中 jest 配置中的目标 monorepo 根目录

Question

我的 monorepo 中有以下文件结构

\n

monorepo\n \xe2\x94\xa3 node_modules\n \xe2\x94\xa3 packages\n \xe2\x94\x83 \xe2\x94\xa3 package-1\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x97 jest.config.js\n \xe2\x94\x83 \xe2\x94\xa3 package-2\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x97 jest.config.js\n \xe2\x94\x83 \xe2\x94\xa3 package-3\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x97 jest.config.js\n \xe2\x94\xa3 package.json\n \xe2\x94\x97 jest.base.config.js\n

\n

在 monorepo 根目录中，我有一个文件jest.base.config.js，其中包含

\n

module.exports = {\n  coverageThreshold: {\n    global: {\n      branches: 80,\n      functions: 80,\n      lines: 80,\n      statements: 80,\n    },\n  },\n  moduleFileExtensions: [\'ts\', \'tsx\', \'js\', \'jsx\', \'json\', \'node\'],\n  transformIgnorePatterns: [\n    \'node_modules/(?!((jest-)?react-native|@react-native(-community)?|@fortawesome/react-native-fontawesome|d3-.*|internmap)/)\',\n  ],\n};\n

\n

然后在每个包中jest.config.js我导入jest.base.config并使用任何覆盖导出它，就像这样

\n

const baseConfig = require(\'../../jest.base.config\');\n\nmodule.exports = {\n  ...baseConfig,\n  testPathIgnorePatterns: [\'<rootDir>/cypress/\'],\n  collectCoverageFrom: [\'src/**/*.{ts,tsx,js,jsx}\', \'!src/**/*.style.{ts,js}\'],\n  moduleNameMapper: {\n    \'^.+\\\\.svg$\': \'<rootDir>/__mocks__/mockSVG.js\',\n    \'\\\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|pdf)$\':\n      \'<rootDir>/__mocks__/mockFile.js\',\n    \'\\\\.(css|less)$\': \'identity-obj-proxy\',\n  },\n  globals: {\n    __WEB__: true,\n    google: {},\n  },\n  setupFiles: [\'./jest.setup.js\'],\n  testURL: \'http://localhost:3000\',\n};\n

\n

但是，其中一个包@uiw/react-textarea-code-editor （Issue Here）存在一个问题，需要映射器，因此尝试将其映射到通用 js 文件，方法是将其添加为文件moduleNameMapper中属性中的属性jest.config.js。

\n

moduleNameMapper: {\n  ...\n  \'@uiw/react-textarea-code-editor\': \'<rootDir>/node_modules/@uiw/react-textarea-code-editor/dist/editor.js\',\n},\n

\n

这适用于我拥有的常规存储库，但这里的问题是<rootDir>/node_modules目标./packages/package-1/node_modules而不是./node_modules单一存储库的根目录，因为那是@uiw目录所在的位置。

\n

现在，我知道我可以将其更改rootDir为rootDir: \'./../../\',，但这会抛弃所有其他引用rootDir

\n

我试过

\n

moduleNameMapper: {\n  ...\n  \'@uiw/react-textarea-code-editor\': \'../../node_modules/@uiw/react-textarea-code-editor/dist/editor.js\',\n},\n

\n

应该瞄准哪个./node_modules/@uiw/react-textarea-code-editor/dist/editor.js

\n

但这给了我以下错误

\n

Configuration error:\n    \n    Could not locate module @uiw/react-textarea-code-editor mapped as:\n    ../../node_modules/@uiw/react-textarea-code-editor/dist/editor.js.\n    \n    Please check your configuration for these entries:\n    {\n      "moduleNameMapper": {\n        "/@uiw\\/react-textarea-code-editor/": "../../node_modules/@uiw/react-textarea-code-editor/dist/editor.js"\n      },\n      "resolver": undefined\n    }\n

\n

还有比改变rootDir值更优雅的解决方案吗？

\n

Answer 1

你能用吗path.resolve？

moduleNameMapper: {
  '@uiw/react-textarea-code-editor': path.resolve(
     __dirname, 
    '../../node_modules/@uiw/react-textarea-code-editor/dist/editor.js'
  ),
},

或相对路径<root>

moduleNameMapper: {
  '@uiw/react-textarea-code-editor': '<rootDir>/../../node_modules/@uiw/react-textarea-code-editor/dist/editor.js'
},