monorepo包中jest config中的目标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 (在此发行)中有一个问题，因此尝试将其映射到公共js文件，方法是将它作为属性添加到jest.config.js文件中的moduleNameMapper属性中。

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，而不是monorepo根目录上的./node_modules，因为@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值更优雅的解决方案吗？

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

Answer 2

基于与问题有关，我相信这句话正确地识别了问题。一旦@uiw/react-textarea-code-editor的维护人员决定使用只支持ESM的rehype版本，他们就应该在下一个主要版本中取消对CJS的支持。

如果您可以降级您的@uiw/react-textarea-code-editor版本，您可以使用npm i @uiw/react-textarea-code-editor@1.3.1，这是依赖于CommonJS版本的rehype的最新版本。

或者，如果您可以将当前版本的@uiw/react-textarea-code-editor与不同版本的rehype混合，并使用支持传递依赖解决(例如resolutions for yarn或overrides for npm )的包管理器，则可以使用CommonJS将最新版本降级为rehype@11.0.0。

例如，使用npm

  "overrides": {
    "rehype": "11.0.0"
  }