jestjs - 在 monorepo 包中的 jest 配置中定位 monorepo 根目录

Question

我的 monorepo 中有以下文件结构

📦monorepo
 ┣ 📂node_modules
 ┣ 📂packages
 ┃ ┣ 📂package-1
 ┃ ┃ ┗ 📜jest.config.js
 ┃ ┣ 📂package-2
 ┃ ┃ ┗ 📜jest.config.js
 ┃ ┣ 📂package-3
 ┃ ┃ ┗ 📜jest.config.js
 ┣ 📜package.json
 ┗ 📜jest.base.config.js

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

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

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

const baseConfig = require('../../jest.base.config');

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

但是，其中一个软件包存在问题 @uiw/react-textarea-code-editor (Issue Here)这需要一个映射器，因此尝试通过将其作为属性添加到 moduleNameMapper 中来将其映射到一个普通的 js 文件。 jest.config.js中的属性(property)文件。

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

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

现在，我知道我可以更改 rootDir成为rootDir: './../../',但这会排除对 rootDir 的所有其他引用

我试过了

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

哪个目标应该是./node_modules/@uiw/react-textarea-code-editor/dist/editor.js

但这给了我以下错误

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

有没有比更改 rootDir 更优雅的解决方案？值(value)？

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'
},