Angular中Jest无法识别自定义相对路径模块问题求助

问题描述 #

我在Jest中使用自定义相对路径时遇到了模块找不到的问题，多次尝试后仍无法解决。报错信息如下：

无法从'src/app/shared/components/base-grid/base-grid.component.ts'找到模块'@ht/tools'

调用栈：
src/app/shared/components/base-grid/base-grid.component.ts -> src/app/shared/index.ts -> src/app/pages/registries/subpages/temperatures/components/temperature-objects-grid/temperature-objects-grid.component.ts -> src/app/pages/registries/subpages/temperatures/containers/temperatures/temperatures.component.ts -> src/app/pages/registries/subpages/temperatures/containers/temperatures/temperature.component.spec.ts

我的jest.config.js配置如下：

module.exports = { 
  preset: 'jest-preset-angular', 
  globals: { 
    'ts-jest': { 
      tsConfig: 'src/tsconfig.spec.json', 
    } 
  }, 
  transform: { 
    '^.+\\.(ts|js|html)$': 'ts-jest' 
  }, 
  moduleNameMapper: { 
    "@ht/$": "<rootDir>/src/app/shared/$1", 
    '^src/(.*)$': '<rootDir>/src/$1', 
    '^app/(.*)$': '<rootDir>/src/app/$1', 
    '^assets/(.*)$': '<rootDir>/src/assets/$1', 
    '^environments/(.*)$': '<rootDir>/src/environments/$1', 
  }, 
  moduleFileExtensions: ['ts', 'html', 'js', 'json'], 
  modulePathIgnorePatterns: ["<rootDir>/src/environments"], 
  setupFilesAfterEnv: [ '<rootDir>/src/jest.setup.ts' ] 
};

问题分析 #

你的jest.config.js里的moduleNameMapper配置存在明显问题：针对@ht/*的正则表达式写错了。当前的"@ht/$"只会匹配以@ht/结尾的路径，而你要匹配的是@ht/tools这种@ht/后面跟任意子路径的情况，正则无法正确捕获tools部分，导致Jest找不到对应的模块文件。

解决方案 #

1. 修正Jest的路径别名配置 #

把moduleNameMapper里的@ht规则修改为正确的正则表达式：

moduleNameMapper: { 
  "@ht/(.*)$": "<rootDir>/src/app/shared/$1", // 修正这里的正则
  '^src/(.*)$': '<rootDir>/src/$1', 
  '^app/(.*)$': '<rootDir>/src/app/$1', 
  '^assets/(.*)$': '<rootDir>/src/assets/$1', 
  '^environments/(.*)$': '<rootDir>/src/environments/$1', 
},

这里的@ht/(.*)$会匹配所有以@ht/开头的路径，并把/后面的部分（比如tools）捕获到$1，映射到<rootDir>/src/app/shared/下对应的文件。

2. 确保TypeScript配置同步路径别名 #

Jest的路径别名需要和你项目中的TypeScript配置保持一致，否则即使Jest能解析，TypeScript编译时也会报错。请检查src/tsconfig.spec.json（或者根目录的tsconfig.json）的compilerOptions.paths部分，确保添加了对应的配置：

{
  "compilerOptions": {
    // 其他配置...
    "paths": {
      "@ht/*": ["src/app/shared/*"]
    }
  }
}

3. 验证并清除缓存 #

修改配置后，建议先清除Jest的缓存，避免旧配置残留：

jest --clearCache

然后重新运行测试，看是否能正常解析@ht/tools模块。

额外排查点 #

如果以上步骤后问题仍存在，你可以检查：

• 确认src/app/shared/tools（或对应的文件结构）确实存在，路径和文件名没有拼写错误
• 检查是否有其他配置文件（比如babel.config.js）可能覆盖了Jest的路径映射
• 确认ts-jest正确读取了src/tsconfig.spec.json，可以在globals['ts-jest']里添加diagnostics: true来查看TypeScript编译日志，排查是否有配置读取问题

内容的提问来源于stack exchange，提问作者Wiktor Dębski