在前一篇文章中介绍了Jasmine框架在Angular中的使用，而无法避开的另外一个部分就是Karma，这篇文章将继续通过demo应用来介绍Karma在Angular中的运用。
Karma是一个对JavaScript代码执行提供多种浏览器运行环境的工具，前身是被2012年Google开源的Testacular，2013年被更名为Karma。
当有如下需求时，则可以考虑使用Karma
希望在真实的浏览器中测试前端代码希望在多平台、多浏览器中测试前端代码希望在开发时本地能够进行前端测试希望前端测试能够整合到持续集成实践中希望每次文件的更新都会执行测试希望使用instanbul自动化生成测试覆盖率报告希望使用RequireJSKarma和Jasmine实际上并不具有可比性。Jasmine是前端的测试框架，与之类似的还有Mocha和Jasmine以及QUnit等。
Karma支持主流的浏览器，包括
Chrome and Chrome CanaryFirefoxSafariPhantomJSJSDOMOperaInternet ExplorerSauceLabsBrowserStack…使用karma init命令可以用交互方式设定Karma的配置文件。具体步骤与说明如下所示
步骤1: 全局安装karma 使用npm install -g karma即可安装Karma，安装和版本确认的执行命令与结果信息如下所示： liumiaocn:~ liumiao$ npm install -g karma /Users/liumiao/.nvm/versions/node/v10.15.3/bin/karma -> /Users/liumiao/.nvm/versions/node/v10.15.3/lib/node_modules/karma/bin/karma + karma@4.4.1 added 142 packages from 490 contributors in 6.874s liumiaocn:~ liumiao$ karma --version Karma version: 4.4.1 步骤2: 生成Karma配置文件 按照如下提示一步一步生成Karma的配置文件 liumiaocn:~ liumiao$ mkdir -p karmatest liumiaocn:~ liumiao$ cd karmatest/ liumiaocn:karmatest liumiao$ ls liumiaocn:karmatest liumiao$ karma init Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine Do you want to use Require.js ? This will add Require.js plugin. Press tab to list possible options. Enter to move to the next question. > no Do you want to capture any browsers automatically ? Press tab to list possible options. Enter empty string to move to the next question. > Chrome > What is the location of your source and test files ? You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js". Enter empty string to move to the next question. > Should any of the files included by the previous patterns be excluded ? You can use glob patterns, eg. "**/*.swp". Enter empty string to move to the next question. > Do you want Karma to watch all the files and run the tests on change ? Press tab to list possible options. > yes Config file generated at "/Users/liumiao/karmatest/karma.conf.js". liumiaocn:karmatest liumiao$ 步骤3: 确认配置文件 所生成配置文件信息如下所示 liumiaocn:karmatest liumiao$ cat karma.conf.js // Karma configuration // Generated on Tue Oct 29 2019 22:24:00 GMT+0800 (China Standard Time) module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['jasmine'], // list of files / patterns to load in the browser files: [ ], // list of files / patterns to exclude exclude: [ ], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { }, // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: ['progress'], // web server port port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['Chrome'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false, // Concurrency level // how many browser should be started simultaneous concurrency: Infinity }) } liumiaocn:karmatest liumiao$上述的步骤3中可以看到使用karma init生成了一个配置文件，接下来我们来看一下这个配置文件常用的设定项目与用途。
basepath用来设定测试文件与当前配置文件的相对路径关系, 默认配置唯空，一般会结合files选项进行设定。
指定测试框架，缺省为jasmine，可选择的还有mocha和QUnit等。
files用于指定会在浏览器中执行的测试文件，exclude用于指定将哪些files中的文件进行排除。
可以用于设定需要进行预处理的文件与预处理器，常见的预处理器有babel和coverage等。
用于设定报表的生成方式，可设定为progress或dots等。
web服务器的端口，karma运行时，结果会在浏览器的此端口进行输出
输出结果是否为彩色，缺省为彩色（true），也可以设定为false
日志级别，可以设定为config.LOG_DISABLE 、config.LOG_ERROR、config.LOG_WARN 、 config.LOG_INFO、 config.LOG_DEBUG其中之一，缺省设定为config.LOG_INFO。
是否监控文件状态，当设定为true的时候，测试目标文件发生变化时会自动被执行。
设定使用的浏览器，缺省为Chrome
是否仅仅运行一次，缺省设定为false，如果设定为true时，karma在浏览器中运行完毕测试文件之后则会退出，一般在持续集成的环境中会被使用。
用于设定同时启动浏览器的并发数。
前文介绍使用ng new demo生成的应用中Karma的配置文件如下所示：
liumiaocn:demo liumiao$ cat karma.conf.js // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html 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 }, coverageIstanbulReporter: { dir: require('path').join(__dirname, './coverage/demo'), reports: ['html', 'lcovonly', 'text-summary'], fixWebpackSourcePaths: true }, reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false, restartOnFileChange: true }); }; liumiaocn:demo liumiao$除了在karma init中生成的参数设定之外，还用到了如下的设定参数
用于指定测试时所使用到的插件
使用Istanbul来生成测试结果报告，并可以对输出的常熟和格式进行设定。
在此文件中，将test.ts、tsconfig.spec.json与karma.conf.js进行了关联
84 "test": { 85 "builder": "@angular-devkit/build-angular:karma", 86 "options": { 87 "main": "src/test.ts", 88 "polyfills": "src/polyfills.ts", 89 "tsConfig": "tsconfig.spec.json", 90 "karmaConfig": "karma.conf.js",测试选项的设定包括编译选项在此文件中，其中包括测试文件的目录等。
liumiaocn:demo liumiao$ cat tsconfig.spec.json { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/spec", "types": [ "jasmine", "node" ] }, "files": [ "src/test.ts", "src/polyfills.ts" ], "include": [ "src/**/*.spec.ts", "src/**/*.d.ts" ] } liumiaocn:demo liumiao$通过test.ts文件找到所有测试文件并执行。
ng test命令的执行结果中能清楚地看到Karma的执行过程，主要分为如下步骤
步骤1: 在9876端口（karma配置文件中设定）启动Karma服务步骤2: 启动Chrome浏览器（karma配置文件中设定）步骤3: 执行测试文件并显示测试结果如下为生成测试覆盖率的ng 测试的执行日志示例信息：
liumiaocn:demo liumiao$ ng test --code-coverage 30% building 12/12 modules 0 active29 10 2019 06:43:49.486:WARN [karma]: No captured browser, open http://localhost:9876/ 29 10 2019 06:43:49.628:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/ 29 10 2019 06:43:49.629:INFO [launcher]: Launching browsers Chrome with concurrency unlimited 29 10 2019 06:43:49.631:INFO [launcher]: Starting browser Chrome 29 10 2019 06:43:54.228:WARN [karma]: No captured browser, open http://localhost:9876/ 29 10 2019 06:43:54.363:INFO [Chrome 78.0.3904 (Mac OS X 10.14.0)]: Connected on socket 3ZmfRRKlLYvWCOsnAAAA with id 22498255 Chrome 78.0.3904 (Mac OS X 10.14.0): Executed 3 of 3 SUCCESS (0.364 secs / 0.309 secs) TOTAL: 3 SUCCESS TOTAL: 3 SUCCESS TOTAL: 3 SUCCESS =============================== Coverage summary =============================== Statements : 100% ( 6/6 ) Branches : 100% ( 0/0 ) Functions : 100% ( 1/1 ) Lines : 100% ( 5/5 ) ================================================================================https://github.com/karma-runner/karma/ https://karma-runner.github.io/
淼叔 认证博客专家 神经网络 TensorFlow NLP 资深架构师，PMP、OCP、CSM、HPE University讲师，EXIN DevOps Professional与DevOps Master认证讲师，曾担任HPE GD China DevOps & Agile Leader，帮助企业级客户提供DevOps咨询培训以及实施指导。熟悉通信和金融领域，有超过十年金融外汇行业的架构设计、开发、维护经验，在十几年的IT从业生涯中拥有了软件开发设计领域接近全生命周期的经验和知识积累，著有企业级DevOps技术与工具实战。