jasmineのテストをKarmaで実行する

jasmineのテストはブラウザで実行する(SpecRunner.html)のですが慣れてくると面倒です。
コンソールで実行したくなってきます。
そこで、AngularJSチームにて開発されたKarma をテストランナーとして使ってみました。
導入も楽だし、今後も使っていきたいと思いました。
　

Karma

いわゆるテストランナーで、いろいろなブラウザで実行することができます。
周辺のライブラリがたくさんあり、組み合わせるといろんなことが可能なようです。
ざっと良さそうなところを書くと
　

• コマンドラインから実行可能
• 各種ブラウザで実行できる（PhantomJSも指定可能） https://www.npmjs.com/browse/keyword/karma-launcher npm
• preprocessorで色々できる（babel, typescript, coffeeの変換とか）
• reporterとしてcoverageなどが出力できる

使ってみます

Install

今回はphantomjsで実行させるので、phantomjsを入れておきます。

$ brew install phantomjs

karma, karma-coverage, karma-jasmine, karma-phantomjs-launcher, phantomjs-prebuilt
を追加。npm のphantomjsはdeprecated になっており、現在は phantomjs-prebuilt に変更されています。

// package.json
  "devDependencies": {
    "jasmine": "~2.4.0",
    "karma": "~0.13.21",
    "karma-coverage": "~0.5.3",
    "karma-jasmine": "~0.3.7",
    "karma-phantomjs-launcher": "~1.0.0",
    "phantomjs-prebuilt": "~2.1.4"
  }

$ npm install

Karmaで必要なconfを対話形式で作成します。

$ ./node_modules/karma/bin/karma init

testing framework: jasmine
browser: PhantomJS
　
生成された karma.conf.js を一部手動で修正します。

    frameworks: ['jasmine'],

    files: [
      "spec/helpers/*.js",
      "js/background.js",
      "spec/**/*Spec.js"
    ],

    preprocessors: {
      'js/**/*.js': ['coverage']
    },

    browsers: ['PhantomJS'],

Execute tests

$ ./node_modules/karma/bin/karma start

で実行できます。filesで指定したファイルは変更監視されており、自動でテストが実行されます。

このままだと実行され続けちゃうので、CI は karma.conf.js のsingleRun をfalseにするか
以下のようにすることで対応可能です。

./node_modules/karma/bin/karma start --single-run

npm のタスクとして登録しときましょう。

// package.json
  "scripts": {
    "test": "./node_modules/karma/bin/karma start"
  },

$ npm test

coverage

こんな感じ。
まだ赤いので緑にしていきます。