Angular13升级至16后Jest配置ts-jest报错求助

问题背景 #

将Angular从13升级至16后，jest.preset.js中在globals下定义ts-jest配置时收到弃用警告：Define 'ts-jest' config under 'globals' is deprecated。按照提示将配置迁移至transform后，执行npm run test出现大量unexpected token语法错误。

原有配置 #

const nxPreset = require("@nx/jest/preset");
const esModules = ["@angular", "tslib", "rxjs"];

module.exports = {
  ...nxPreset,
  globals: {
    "ts-jest": {
      tsconfig: "<rootDir>/tsconfig.spec.json",
      stringifyContentPathRegex: "\\.(html|svg)$",
    },
  },
  transformIgnorePatterns: [
    `<rootDir>/node_modules/(?!.*\\.mjs$|${esModules.join("|")})`,
  ],
  transform: {
    "^.+\\.(ts|mjs|js|html)$": "jest-preset-angular",
  },
  testEnvironment: "jsdom",
  resolver: "@nx/jest/plugins/resolver",
  moduleFileExtensions: ["ts", "html", "js", "json", "mjs"],
  snapshotSerializers: [
    "jest-preset-angular/build/serializers/no-ng-attributes",
    "jest-preset-angular/build/serializers/ng-snapshot",
    "jest-preset-angular/build/serializers/html-comment",
  ],
};

错误的修改配置 #

const nxPreset = require("@nx/jest/preset");
const esModules = ["@angular", "tslib", "rxjs"];

module.exports = {
  ...nxPreset,
  transform: {
    "^.+\\.(ts|mjs|js|html)$": [
      "ts-jest",
      {
        tsconfig: "<rootDir>/tsconfig.spec.json",
        stringifyContentPathRegex: "\\.(html|svg)$",
      },
    ],
  },
  transformIgnorePatterns: [
    `<rootDir>/node_modules/(?!.*\\.mjs$|${esModules.join("|")})`,
  ],
  testEnvironment: "jsdom",
  resolver: "@nx/jest/plugins/resolver",
  moduleFileExtensions: ["ts", "html", "js", "json", "mjs"],
  snapshotSerializers: [
    "jest-preset-angular/build/serializers/no-ng-attributes",
    "jest-preset-angular/build/serializers/ng-snapshot",
    "jest-preset-angular/build/serializers/html-comment",
  ],
};

正确配置调整 #

问题根源是修改时将transform中的jest-preset-angular替换成了ts-jest，但jest-preset-angular是Angular专属的Jest预设，已集成ts-jest及Angular模板解析、依赖模拟等逻辑，直接替换会丢失这些关键规则。正确做法是将ts-jest配置作为参数传递给jest-preset-angular：

const nxPreset = require("@nx/jest/preset");
const esModules = ["@angular", "tslib", "rxjs"];

module.exports = {
  ...nxPreset,
  transform: {
    "^.+\\.(ts|mjs|js|html)$": [
      "jest-preset-angular",
      {
        tsconfig: "<rootDir>/tsconfig.spec.json",
        stringifyContentPathRegex: "\\.(html|svg)$",
      },
    ],
  },
  transformIgnorePatterns: [
    `<rootDir>/node_modules/(?!.*\\.mjs$|${esModules.join("|")})`,
  ],
  testEnvironment: "jsdom",
  resolver: "@nx/jest/plugins/resolver",
  moduleFileExtensions: ["ts", "html", "js", "json", "mjs"],
  snapshotSerializers: [
    "jest-preset-angular/build/serializers/no-ng-attributes",
    "jest-preset-angular/build/serializers/ng-snapshot",
    "jest-preset-angular/build/serializers/html-comment",
  ],
};

额外检查项 #

• 确保jest-preset-angular版本与Angular 16兼容，执行npm install jest-preset-angular@latest --save-dev更新至适配版本
• 检查tsconfig.spec.json：target设为ES2020+，module设为ESNext或CommonJS
• 清理Jest缓存：执行npx jest --clearCache后重新运行测试

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