Karma(元Testacular)を使って簡単にテストを実行しよう

developer tools

#JavaScript

#テスト

中村修太

2013.04.02

この記事は公開されてから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)
・
・

起動したブラウザは、下記のような画面が出るはずです。
img-karma

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テストが実行されます。