【Angular CLI・Karma】JUnit形式のテスト結果を出力する

概要

Angular CLI利用時にKarmaでのテスト実行時にテスト結果をJUnit形式で出力する方法です。
なぜJUnit形式でテスト結果を出力するかというとJenkins等でテスト結果を取り込むのにJUnit形式だと簡単に出来るからです。

今回利用するツールはkarma-junit-reporter です。
npmによるインストールの追加とkarma.conf.jsの修正を行うだけで対応可能です。

動作環境

• @angular/cli 6.0.3
• karma 1.7.1
• karma-junit-reporter 1.2.0

サンプルソース

package.json

package.jsonのdevDependenciesにkarma-junit-reporterを追加する。

"devDependencies": {
   /* 省略 */
  "karma-junit-reporter": "~1.2.0"
}

karma.conf.js

karma.conf.jsに以下の修正を行う。

1. plugins に require('karma-junit-reporter') を追加する。
2. reportersにjunitを追加する。
3. junitReporterを末尾に追加する。

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular-devkit/build-angular'],

        // プラグインにkarma-junit-reporterを追加
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage-istanbul-reporter'),
            require('karma-spec-reporter'),
            require('karma-junit-reporter'),
            require('@angular-devkit/build-angular/plugins/karma')
        ],
        
        // 省略  

        // 出力対象にJUnit形式を追加
        reporters: ['spec', 'kjhtml', 'junit'],
        
        // 省略  

        // JUnit出力設定
        junitReporter: {
            // 出力ディレクトリ
            outputDir: require('path').join(__dirname, '../reports'),
            // 出力ファイル名
            outputFile: 'test-results.xml',
            suite: '',
            useBrowserName: false
        }
    });
};