如何在带有Typescript + Jest的React项目中使用路径别名

Question

我在我的React项目（打字稿）中一直在使用jest进行单元测试。现在，我在webpack和tsconfig中启用了路径别名。为了配合使用路径别名，我遵循了此tutorial。但是运行测试时出现此错误：

这是我的Webpack配置，用于启用路径别名：

alias: {
  'ui': path.resolve(__dirname, 'src/framework/components/ui')
}

这是我最喜欢的配置，用于启用路径别名（package.json）

"moduleNameMapper": {
    "ui": "<rootDir>/src/framework/components/ui/"
}

我也在教程中尝试了此版本：

"moduleNameMapper": {
   "^ui/(.*)$1": "<rootDir>/src/framework/components/ui/$1"
}

最后这是我的tsconfig.json配置：

"baseUrl": "src",
"paths": {
  "ui": ["framework/components/ui"]      
}

运行测试时，玩笑实际上会解析路径别名。但是它无法拾取默认情况下暴露的组件。例如此行：

import Button from './FormComponents/Button';

失败，因为默认情况下“ Button”是从其模块中导出的。

我希望我的问题有意义。预先感谢您的帮助。

Answer 1

尝试

"moduleNameMapper": {
   "^ui/(.*)": "<rootDir>/src/framework/components/ui/$1"
}

正则表达式中不应包含$ 1，因为替换字符串中使用了$ 1来插入捕获的文本。

例如在您的示例中，“按钮”将由（。*）捕获，然后代替替换字符串中的$ 1。

Answer 2

使用ts-jest https://kulshekhar.github.io/ts-jest/user/config/#jest-config-with-helper：

// jest.config.js
const { pathsToModuleNameMapper } = require('ts-jest/utils');
// In the following statement, replace `./tsconfig` with the path to your `tsconfig` file
// which contains the path mapping (ie the `compilerOptions.paths` option):
const { compilerOptions } = require('./tsconfig');

module.exports = {
  // [...]
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths /*, { prefix: '<rootDir>/' } */ )
};