Angular 16无需CLI运行Karma测试：未找到规格文件问题

在Angular CLI生成的Angular 16项目中，因企业需求需跳过Angular CLI，直接用Karma CLI启动测试，但运行后出现Incomplete: No specs found错误。旧版Angular中CLI会生成test.ts，现在该逻辑由angular.json管理，怀疑问题出在文件路径配置错误。

操作步骤 #

• 使用ng new生成新Angular CLI项目
• 创建不含Angular插件的karma-sans-ng.conf.js（基于CLI生成的Karma配置修改）
• 自行创建src/test.ts（Angular 16不再自动生成该文件）
• 修改tsconfig.spec.json以包含src/test.ts，用于初始化测试工具
• 执行tsc --project .\tsconfig.spec.json编译
• 执行karma start .\karma-sans-ng.conf.js启动Karma，但未找到测试规格文件

相关配置文件 #

karma-sans-ng.conf.js

const webpack = require('webpack');

module.exports = function (config) {
  config.set({
    basePath: '',
    files: [
      //include the test initialization and the actual tests
      {
        pattern: 'out-tsc/spec/test.js',
        type: 'module'
      },
      {
        pattern: 'out-tsc/**/*.spec.js',
        type: 'module'
      }
    ],
    frameworks: ['jasmine'],
    plugins: [
      require('karma-webpack'),  //needed to bundle everything for the browser
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
    ],
    preprocessors: {
       //more webpack stuff needed to bundle everything for the browser
      'out-tsc/spec/test.js': [ 'webpack' ],
      'out-tsc/**/*.spec.js': [ 'webpack' ]
    },
    webpack: {
      plugins: [
        //needed, or Karma gets errors about "process not defined"
        new webpack.ProvidePlugin({
          process: 'process/browser',
        }),
      ]
    },
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
      },
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    },
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage/testing-without-cli'),
      subdir: '.',
      reporters: [
        { type: 'html' },
        { type: 'text-summary' }
      ]
    },
    reporters: ['progress', 'kjhtml'],
    browsers: ['Chrome'],
    restartOnFileChange: true
  });
};

test.ts

import 'zone.js';
import 'zone.js/testing';

import { TestBed, getTestBed } from "@angular/core/testing";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";

declare const __karma__:any;
declare const require: any;

__karma__.loaded = function(){};

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

const context = require.context('./', true, /\.spec\.ts$/);
//const context = require.context('./', true, /out-tsc\\spec\\.*.spec.js$/); //this doesn't work either
context.keys().map(context);
__karma__.start();

tsconfig.spec.json

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

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