Webpack构建后Karma未找到spec文件的Angular 5测试问题

我维护Angular 5项目时也碰到过一模一样的情况——Webpack明明把spec文件编译出来了，但Karma就是不执行，显示Executed 0 of 0 ERROR。下面是我排查和解决的几个关键点，你可以逐一检查：

1. 检查Karma的文件匹配与预处理配置 #

Karma没找到编译后的spec文件是最常见的原因。打开你的karma.config.js，重点看这两个配置项：

• files：必须明确指向Webpack输出的spec文件路径，比如你的输出在wwwroot/ts/下，那就要写：

  files: [
    'wwwroot/ts/**/*.spec.ts'
  ],
  

• preprocessors：要给这些spec文件指定用webpack预处理，否则Karma无法解析编译后的模块：

  preprocessors: {
    'wwwroot/ts/**/*.spec.ts': ['webpack']
  },
  

2. 确保有测试入口文件加载所有spec #

Angular测试需要一个入口文件（通常叫test.ts）来批量导入所有spec文件，否则Webpack编译的单个spec文件不会被Karma识别。创建或检查你的test.ts，确保包含以下内容：

// Angular 5必需的polyfill，缺一不可
import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/proxy';
import 'zone.js/dist/jasmine-patch';

// 自动加载所有.spec.ts文件
declare const require: any;
const context = require.context('./wwwroot/ts', true, /\.spec\.ts$/);
context.keys().forEach(context);

同时要在karma.config.js的files里把这个test.ts也加上，或者直接让Webpack把它作为测试入口。

3. 检查Webpack配置是否排除了spec文件 #

如果你的主Webpack配置里有exclude: /\.spec\.ts$/，那测试环境下要去掉这个排除规则——否则Webpack根本不会编译spec文件（你看到的编译输出可能是旧的）。建议为测试单独写一个webpack.test.config.js，专门处理测试文件的编译。

4. 验证Karma的浏览器捕获配置 #

有时候Karma没正确捕获浏览器也会导致测试不执行。可以试试：

• 把singleRun设为false，手动打开浏览器访问Karma的地址（通常是http://localhost:9876/），看控制台有没有报错
• 改用ChromeHeadless作为测试浏览器，避免手动交互的问题：

  browsers: ['ChromeHeadless'],
  

5. 确认依赖版本兼容 #

Angular 5是比较老的版本，要确保Karma相关依赖的版本和它兼容：

• karma建议用~1.7.x版本
• karma-webpack用~2.0.x
• jasmine-core用~2.8.x
• 还要确保安装了@angular/cli/testing、karma-jasmine、karma-chrome-launcher这些必需依赖

先从第1、2点开始查，这两个是最容易出问题的地方！

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