gulp+ES6+Karma(Jasmine)でユニットテスト

2015-12-10
blog

AngularJSを使うES6で書かれたコードのユニットテストを動かす方法を調べた。テストのフレームワークとしてJasmine、テスト実行環境としてKarma、タスクランナーにgulpを使ってみた。

方法自体はAngularJSに限らず一般のJavaScriptのユニットテストとして使えるはず。

Karmaのインストール

$ npm install --save-dev karma

Karmaのユニットテスト

Karmaを走らせるには設定ファイルが必要になる。 karma initkarma.conf.js が作られる。生成された karma.conf.js をいじって、以下のようにしてみた:

// karma.conf.js
// Karma configuration
// Generated on Thu Dec 10 2015 09:12:34 GMT+0900 (JST)

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: ['browserify', 'jasmine'],


// list of files / patterns to load in the browser
files: [
'public/lib/jquery-1.11.3.min.js',
'public/lib/angular.min.js',
'node_modules/angular-mocks/angular-mocks.js',
'src/test/**/*.spec.js'
],


// list of files to exclude
exclude: [
],


// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'src/**/*.js': ['browserify'],
},

browserify: {
transform: ['babelify'],

// don't forget to register the extensions
extensions: ['.js', '.jsx', '.coffee'],
},

// 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: ['PhantomJS'],


// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,

// Concurrency level
// how many browser should be started simultanous
concurrency: Infinity
})
}
  • filesにテストで使うコードを指定
    • テストコードは src/test/*.spec.js に置く
    • 上のソースの場合、jQuery、AngularJS、ngMockを使用する
  • ES6のコードを処理できるようにするために、preprocessorsbrowserifyを指定して、transform['babelify']を指定する
  • browsersにはPhantomJSを指定
$ karma start karma.conf.js

でユニットテストを走らせることができる。

gulpでユニットテストを走らせる

karmaをコマンドラインから直接呼び出してもいいのだが、gulpのタスクとして呼び出せるようにするとビルドと一緒に行えるようになって便利:

// gulpfile.js
const gulp = require('gulp')
const karmaServer = require('karma').Server

gulp.task('test-oneshot', function(done) {
new karmaServer({
configFile: __dirname + '/karma.conf.js',
singleRun: true,
}, done).start()
})
  • 変更を監視してテストを走らせたい場合には singleRun を削除するとよい(karma.conf.js内でfalseにしているので)

参考