JavaScript の テスト結果レポートを Jenkins で表示させる

JS でビジネスロジックとかあまり書きたくないけど、プロダクトコードはテストして CI したいってことで、Jenkins と Gulp 連携してみました。

あらかじめ npm で xunit-file を導入しておきます。

Mocha でテスト書いてます。

var gulp = require('gulp');
var pkg = require('./package.json');
var mocha = require('gulp-mocha');
var cover = require('gulp-coverage');

gulp.task('test', function() {
    return gulp.src('./test/*.js', {read: false})
    .pipe(cover.instrument({
        pattern: ['./src/js/*.js'],
        debugDirectory: './debug'
    }))
    .pipe(mocha({reporter: 'xunit-file'}))
    .pipe(cover.gather())
    .pipe(cover.format())
    .pipe(gulp.dest('reports'));
});

Jenkins 側の設定(Windowsです)

カバレッジレポートの例です。上の Jenkins の設定例では、生成されたレポートの HTML を Jenkins の userContent フォルダにコピーしていますが、レポートをビルド成果物に含めれば、ビルド毎にレポートが残りますし、http://jenkins_host/lastBuild/artifact/coverage.html のように最新の結果を閲覧可能です。

Jenkins のビルドレポートの例です。