更新到 27 后，Angular jest 无法理解导入路径

Question

这是一个奇怪的错误。所以我把 jest 更新到 27 然后全部停止工作

导入路径似乎有问题。所以下面的

import { something } form 'src/app/components/.....';

不起作用，但这确实有效：

import { something } from '../../components/....';

我猜这是在 tsconfig 中管理的。这是我的spectsconfig：

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
        "jest", // 1
        "node",
        "Chrome"
    ],
    "esModuleInterop": true, // 2
    "emitDecoratorMetadata": true, // 3
    "allowSyntheticDefaultImports": true,
  },
  "files": ["src/test.ts", "src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

和主要的 tsconfig：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": ["es2018", "dom"],
    "types": [],
    "paths": {
      "@shared/*": ["src/shared/*"]
    },
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "noEmitHelpers": false
  },
  "files": ["src/main.ts", "src/polyfills.ts"],
  "angularCompilerOptions": {
    "strictTemplates": true,
    "fullTemplateTypeCheck": true
  }
}

任何可能导致此导入问题的建议

Answer 1

添加此选项jest.config.js应该可以解决此问题

moduleNameMapper: {
    '^src/(.*)$': '<rootDir>/src/$1',
    '^app/(.*)$': '<rootDir>/src/app/$1',
    '^assets/(.*)$': '<rootDir>/src/assets/$1',
    '^environments/(.*)$': '<rootDir>/src/environments/$1',
},