为什么 Karma 在将 Angular 更新到 v16 后看不到任何测试？

Question

当我运行

ng test --source-map

时，测试不会运行。我仍然获得了成功的认可。

Chrome 115.0.0.0 (Windows 10): Executed 0 of 0 SUCCESS (0.003 secs / 0 secs) TOTAL: 0 SUCCESS TOTAL: 0 SUCCESS

我想，Karma 没有看到测试服。在 Angular 版本 9 中，我已经运行了测试，但是更新到版本 16 后出现了问题（没有任何手动更改配置文件/测试文件）

如果我在测试文件中将“f”放在“describe”前面，我会得到稍微不同的反馈，但它仍然不是正在运行的测试。

我尝试将新的测试文件放入 src 文件夹中。 我仔细检查了 karma.conf.ts 和 angular.json 的测试对象。 我用谷歌搜索了这个问题，但没有找到任何可以帮助我的东西。

karma.conf.js：

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular-devkit/build-angular'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage-istanbul-reporter'),
            require('@angular-devkit/build-angular/plugins/karma')
        ],
        client: {
            clearContext: false // leave Jasmine Spec Runner output visible in browser
        },
        files: [
            
        ],
        preprocessors: {
            
        },
        mime: {
            'text/x-typescript': ['ts', 'tsx']
        },
        coverageIstanbulReporter: {
            dir: require('path').join(__dirname, 'coverage'), reports: ['html', 'lcovonly'],
            fixWebpackSourcePaths: true
        },
        
        reporters: config.angularCli && config.angularCli.codeCoverage ?
            ['progress', 'coverage-istanbul'] :
            ['progress', 'kjhtml'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false
    });
};

tsconfig.spec.json：

{
    "compilerOptions": {
      "sourceMap": true,
      "declaration": false,
      "moduleResolution": "node",
      "experimentalDecorators": true,
      "lib": [
        "es2016",
        "dom"
      ],
      "outDir": "../out-tsc/spec",
      "module": "esnext",
      "target": "ES2022",
      "baseUrl": "",
      "types": [
        "jasmine",
        "node"
      ],
      "useDefineForClassFields": false
    },
    "files": [
        "test.ts",
      "polyfills.ts"
  ],
    "include": [
        "**/*.spec.ts"
    ]
}

测试.ts：

import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;

// Prevent Karma from running prematurely.
__karma__.loaded = function () {};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(), {
    teardown: { destroyAfterEach: false }
}
);
// Finally, start Karma to run the tests.
__karma__.start();

来自 angular.json 的测试对象：

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
       "main": "src/test.ts",
       "karmaConfig": "./karma.conf.js",
       "polyfills": "src/polyfills.ts",
       "tsConfig": "src/tsconfig.spec.json",
       "scripts": [],
       "styles": [
            "node_modules/bootstrap/dist/css/bootstrap.min.css",
            "src/css/styles.css"
            ],
       "assets": [
            "src/assets",
            "src/favicon.png",
            "src/i18n",
            "src/web.config"
            ]
         }
     }

最后是 package.json 文件中的 devDependency：

"devDependencies": {
    "@angular-devkit/build-angular": "^16.2.0",
    "@types/eslint": "^8.40.2",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ts-node": "~2.0.0",
    "tslint": "~6.1.3"
  }

Answer 1

我从 v14 升级到 v16 时遇到了同样的问题，在迁移到 v15 的过程中，test.ts 似乎被修改了，删除了对 .spec.ts 文件的引用。

特别是，这些行从 test.ts 中删除，这几乎表明 .spec.ts 文件将不再被考虑：

// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

所以看来 v15+ 不再使用 test.ts 了。相反，从 angular.json 中删除测试块引用。此外，将 pollyfills 部分更改为数组，如下所示：

"test": {
  // "main": "src/test.ts" <-- remove this
  "polyfills": [
    "src/polyfills.ts",
    "zone.js/testing"
  ],
  ...
}

类似的答案在这里：Angular 从 14 更新到版本 15，现在 ng 测试得到“未找到规格”