更新到 27 后，Angular jest 不理解导入路径答案

【问题标题】：Angular jest doesn't understand import path after update to 27更新到 27 后，Angular jest 不理解导入路径
【发布时间】：2021-09-09 23:50:53
【问题描述】：

这是一个奇怪的错误。所以我把 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
  }
}

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

【问题讨论】：

标签： typescript jestjs tsconfig tsconfig-paths angular-jest

【解决方案1】：

在jest.config.js 中添加这个选项应该可以解决这个问题

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

【讨论】：