Jest无法识别@src等路径别名，多tsconfig配置的React+TS项目报错

以下3处核心配置错误导致路径识别失效，逐一修改即可：

1. 修正Jest的moduleNameMapper配置 #

当前规则未捕获别名后的路径段，也没有用Jest内置的<rootDir>变量定位路径，导致映射完全失效。
修改client/jest.config.js中的moduleNameMapper字段：

moduleNameMapper: {
  '^@src/(.*)$': '<rootDir>/src/$1',
  '^@components/(.*)$': '<rootDir>/src/components/$1',
  // 其他原有映射规则保留
}

<rootDir>默认指向jest.config.js所在的client目录，可保证路径定位准确，正则捕获的$1会把别名后的路径段拼接到目标路径上。

2. 修正所有tsconfig的paths语法错误 #

所有配置中@components的路径匹配规则缺少通配符*，无法匹配@components/xxx形式的导入路径：

• 根目录tsconfig.json修改：

"paths": {
  "@src/*": ["./src/*"],
  "@components/*": ["./src/components/*"]
},

• client/test/tsconfig.json修改：

"paths": {
  "~/*": ["./*"],
  "@src/*": ["./src/*"],
  "@components/*": ["./src/components/*"]
},

3. 补充测试目录tsconfig的继承配置（可选但强烈建议） #

client/test/tsconfig.json未继承上层tsconfig配置，容易出现编译规则不一致的问题，新增extends字段：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    // 原有配置全部保留
  }
}

优化方案（避免维护两份别名配置） #

如果不想手动同步Jest和tsconfig的别名配置，可以用ts-jest提供的pathsToModuleNameMapper工具自动生成映射，修改client/jest.config.js：

const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('./tsconfig.json');

module.exports = {
  // 其他原有配置全部保留
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
    prefix: '<rootDir>/'
  })
};

所有修改完成后清空Jest缓存再运行测试即可：npx jest --clearCache

内容的提问来源于stack exchange，提问作者vbotio