Karma(元Testacular)を使って簡単にテストを実行しよう
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Karmaとは
昨年、Googleがnode.jsベースのJavaScriptテストランナー、「Testacular」をオープンソース化しました。
このツールは元々AngularJSのためのテストフレームワークとして作られたそうで、
クライアントサイドのJavascriptコードのテストを簡単に実行することができます。
このツール自体はテストランナーで、JasmineやMochaなどのテストフレームワークを使用してテストを行います。
先日このプロジェクトの名前が変更され、「Karma」という名前になりました。
今回はKarmaのインストールからテスト実行(+ Gruntでの実行)までをおこなってみます。
環境構築方法
今回使用した動作環境は以下のとおりです。
- OS : MacOS X 10.7.4
- Node.js : v0.10.0
- npm : 1.2.14
- Grunt : 0.4
npmを使用してKarmaをインストールします。
このモジュールはグローバルオプションをつけてインストールしましょう。
% npm install -g karma
Karmaを使ってみる
まずは、karma用設定ファイルを作成します。initコマンドを使用し、いくつかの質問に答えると、設定ファイルを生成してくれます。
% karma init
初期化ウィザードでは、次のように入力します。
テストフレームワークはjasmine、ブラウザはChrome,FireFox,Safariを選択し、
テスト対象のファイルには、「src/*.js」と「test/*.js」を入力しました。
なお、入力はタブ補完も効くようになってます。
Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine Do you want to use Require.js ? This will add Require.js adapter into files. Press tab to list possible options. Enter to move to the next question. > no Do you want to capture a browser automatically ? Press tab to list possible options. Enter empty string to move to the next question. > Chrome > Safari > Firefox > Which files do you want to test ? You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js". Enter empty string to move to the next question. > src/*.js > test/*.js ・ ・ Config file generated at "karma.conf.js".
次はテスト対象のファイルとテストファイルを作成しましょう。まずはテスト対象のファイルを、srcディレクトリに作成します。
//src/hello.js
function greet(name) {
return "Hello," + name;
}
次に、テスト用ファイルをtestディレクトリに作成しましょう。
今回、テストフレームワークはjasmineを使用します。
//test/helloTest.js
describe("greet test", function() {
it("returns Hello,taro", function() {
expect(greet('taro')).toEqual("Hello,taro");
});
});
テストを実行してみましょう。テストはkarma startコマンドで実行します。
ブラウザ(Chrome,Firefox,Safari)が起動後、コンソールには結果が表示されています。
% karma start INFO [karma]: Karma server started at http://localhost:9876/ INFO [launcher]: Starting browser Chrome INFO [Chrome 26.0 (Mac)]: Connected on socket id HhfBKF6ijn3wEW1_HUsB Chrome 26.0 (Mac): Executed 1 of 1 SUCCESS (0.061 secs / 0.004 secs) ・ ・
起動したブラウザは、下記のような画面が出るはずです。
grunt-karmaを使ってGruntから実行
KarmaはGrunt用モジュールも提供しています。
npmで「grunt-karma」モジュールをインストールし、package.jsonと下記のGruntfile.coffeeを記述してください。
% npm init #package.jsonがなければ実行 % npm install grunt-karma
//Gruntfile.coffee
module.exports = (grunt) ->
pkg = grunt.file.readJSON 'package.json'
grunt.initConfig
karma:
unit:
configFile: 'karma.conf.js'
grunt.loadNpmTasks 'grunt-karma'
package.jsonとGruntfile.coffeeを作成すれば、次のコマンドで、さきほどと同じくKarmaテストが実行されます。
% grunt karma
まとめ
今回は便利なテストランナー、Karmaを紹介しました。
Grunt用モジュールもありますし、生産性向上に貢献してくれそうですね。
