Angular 16升级后Jasmine Karma测试失效求助

将Angular从15版本升级至16版本后，执行ng test命令时，系统未加载任何component.spec.ts文件，且所有测试用例均失败。

相关配置文件信息 #

package.json #

"karma": "6.3.17",
    "karma-chrome-launcher": "3.1.0",
    "karma-cli": "1.0.1",
    "karma-firefox-launcher": "^1.0.1",
    "karma-jasmine": "^5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "karma-junit-reporter": "^2.0.1",
    "karma-spec-reporter": "0.0.32",
    "karma-typescript": "^5.4.0",
    "karma-coverage": "^2.2.0",
    "jasmine-auto-spies": "^8.0.1"

tsconfig.json #

{
  "compileOnSave": false,
  "compilerOptions": {
    "downlevelIteration": true,
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noUnusedLocals": false,
    "target": "es2021",
    "typeRoots": ["node_modules/@types", "facebook-js-sdk"],
    "lib": ["es2019", "dom"],
    "module": "esnext",
    "baseUrl": "./src",
    "useDefineForClassFields": false,
    "paths": {
      "@components/*": [
        "app/shared/components/*",
        "app/core/components/*",
        "app/route-controller/pages/virtual-visits/components/*",
        "app/route-controller/pages/virtual-visits/components/schedules-visits/components/*"
      ],
      "@pipes/*": ["app/shared/pipes/*"],
      "@services/*": ["app/core/services/*"],
      "@directives/*": ["app/shared/directives/*"],
      "@core/*": ["app/core/*"],
      "@builders/*": ["app/domain/builder/*"],
      "@entities/*": ["app/domain/entities/*"],
      "@enums/*": ["app/domain/enums/*"],
      "@interfaces/*": ["app/domain/interfaces/*"],
      "@domain/*": ["app/domain/*"],
      "@pages/*": ["app/pages/*", "app/route-controller/pages/*"],
      "@app/*": ["app/*"]
    }
  },
  "exclude": ["src/app/route-controller/pages/**/mocks/*.json"],
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictTemplates": true,
    "enableIvy": true
  }
}

karma.conf.js #

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-typescript'),
      require('karma-spec-reporter'),
      require('karma-junit-reporter'),
      require('karma-chrome-launcher'),
      require('karma-firefox-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma'),
    ],
    specReporter: {
      maxLogLines: 5,
      suppressErrorSummary: false,
      suppressFailed: false,
      suppressPassed: false,
      suppressSkipped: false,
      showSpecTiming: false,
      failFast: false,
    },
    client: {
      clearContext: false, // leave Jasmine Spec Runner output visible in browser
    },
    coverageReporter: {
      dir: require('path').join(__dirname, 'coverage'),
      reporters: [
        { type: 'html' },
        { type: 'text-summary' },
        { type: 'lcovonly' },
      ],
      fixWebpackSourcePaths: true,
      check: {
        global: {
          statements: 50,
          branches: 15,
          functions: 45,
          lines: 50,
        },
      },
    },
    captureTimeout: 60000,
    browserDisconnectTimeout: 60000,
    browserDisconnectTolerance: 3,
    browserNoActivityTimeout: 60000,
    reporters: ['spec', 'progress', 'kjhtml', 'junit'],
    junitReporter: {
      outputDir: '../../../../test-reports/angular/', // results will be saved as $outputDir/$browserName.xml
      outputFile: undefined, // if included, results will be saved as $outputDir/$browserName/$outputFile
      suite: '', // suite will become the package name attribute in xml testsuite element
      useBrowserName: true, // add browser name to report and classes names
      nameFormatter: undefined, // function (browser, result) to customize the name attribute in xml testcase element
      classNameFormatter: undefined, // function (browser, result) to customize the classname attribute in xml testcase element
      properties: {}, // key value pair of properties to add to the <properties> section of the report
      xmlVersion: null, // use '1' if reporting to be per SonarQube 6.2 XML format
    },
    port: 9876,
    colors: true,
    logLevel: config.ERROR,
    browsers: ['CustomChromeHeadless'],
    customLaunchers: {
      CustomChromeHeadless: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox'],
      },
    },
  });
};

执行ng test的报错结果 #

排查修复步骤 #

• 清理依赖与缓存
  删除node_modules、package-lock.json（或yarn.lock），执行npm install，再清理Angular缓存：ng cache clean --all

• 升级兼容的Karma及相关依赖
  Angular 16要求Karma版本≥6.4.x，当前版本过低，执行升级命令：

  npm install karma@^6.4.0 karma-chrome-launcher@^3.2.0 @angular-devkit/build-angular@16 --save-dev
  

• 移除冲突插件
  Angular CLI的测试构建已内置TypeScript处理，无需karma-typescript插件：

  1. 从package.json中删除karma-typescript依赖
  2. 从karma.conf.js的frameworks和plugins数组中移除karma-typescript相关配置

• 检查测试文件匹配规则
  打开angular.json，确认test配置的include规则包含**/*.spec.ts：

  "test": {
    "builder": "@angular-devkit/build-angular:karma",
    "options": {
      // 其他配置...
      "include": ["src/**/*.spec.ts"]
    }
  }
  

  确保项目存在tsconfig.spec.json，且配置如下：

  {
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "outDir": "./out-tsc/spec",
      "types": ["jasmine"]
    },
    "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
  }
  

• 调整TypeScript配置
  Angular 16要求TypeScript≥5.0，升级版本：

  npm install typescript@^5.0.0 --save-dev
  

  同时删除tsconfig.json中已废弃的emitDecoratorMetadata配置项（Ivy模式下无需此配置）

• 重新执行测试
  完成上述调整后，运行ng test验证是否恢复正常

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