KarmaとQUnitを使ったユニットテスト

恥ずかしながらこれまでJSのテストを書いていなかったので、KarmaとQUnitという構成でテストを書き始めました。

なぜQUnitなのか

JSのテストについて調べてみると、
Karma + Mocha + Chai という構成でテストをしているケースが多いようですが、自分の場合まだまだがっつりjQueryに依存しているプロジェクトでコードを書くことが多いので、QUnitを選ぶことにしました。世の中的にjQuery排除の方向に向かっていると感じますが、いろいろな事情でなかなかそうはいかない、という人も結構多いんじゃないかなーと思います。
自分はJSを書く際には機能ごとにCommonJSモジュールとしてファイルを分割し、それをWebpackでビルドしているので、KarmaとQUnitを使ってモジュールごとにテストをすることにしました。また、テストはヘッドレスブラウザであるPhantomJS上で実行することにします。
ディレクトリの構成は以下のようになっています。

package.json
karma.conf.js
src/
└ hoge.js
test/
└ hoge.test.js

必要なnpmパッケージのインストール

テストに必要なパッケージとWebpack、jQueryをインストールします。

npm i karma karma-phantomjs-launcher karma-qunit karma-sourcemap-loader karma-webpack qunitjs@1.23.1 jquery webpack -D

karmaの設定

以下の内容でkarma.conf.jsを作成します。

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

    // list of files / patterns to load in the browser
    files: [
      //'src/*.js',
      'test/*.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: {
      'test/*.js': ['webpack', 'sourcemap'],
      'src/*.js': ['webpack', 'sourcemap']
    },

    // 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,
    webpack: {
    },

    plugins: [
        'karma-webpack',
        'karma-phantomjs-launcher',
        'karma-sourcemap-loader',
        'karma-qunit'
    ],
    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

テストの実行

実際にテストが実行されるか確認していきます。
テスト対象のファイルはsrc/hoge.js、テストコードはtest/hoge.test.jsに書いていきます。

src/hoge.js

var hoge = function(a, b) {
    return a + b;
};
module.exports = hoge;

test/hoge.test.js

var hoge = require('../src/hoge');
QUnit.test('hogeのテスト', function(assert) {
  assert.equal(hoge(1, 1), 2, '1+1は2');
});

また、package.jsonのscriptsに以下のコードを追加して

"test": "karma start"

npm run testでテストを実行します。

            Asset     Size  Chunks             Chunk Names
test/hoge.test.js  1.68 kB       0  [emitted]  test/hoge.test.js
chunk    {0} test/hoge.test.js (test/hoge.test.js) 190 bytes [rendered]
    [0] ./test/hoge.test.js 121 bytes {0} [built]
    [1] ./src/hoge.js 69 bytes {0}
webpack: bundle is now VALID.
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0.001 secs / 0.001 secs)

テストが正常に実行され、成功しました。

実際にQUnitを使ってみると、jQuery依存のコードを書くからといってQUnitを選択することのアドバンテージは然程ないかもな〜と感じました。。。

参考記事

WebpackベースのアプリケーションをKarmaでテストする