テストランナー karma + テストフレームワーク jasmine の環境構築

JavaScript Setup

2015年6月現在における JavaScript テスト環境はこの組み合わせが鉄板みたいなので。

前提条件

  • node.js
  • npm （node.js が入っていれば npm も入っているはず）

karma インストール

https://www.npmjs.com/package/karma

> npm i -g karma

jasmine インストール

https://www.npmjs.com/package/jasmine

> npm i -g jasmine

プロジェクトに karma をセットアップ

コマンド：cd を使って作業したいプロジェクトのルートディレクトリまで移動する。

次に コマンド：karma init で karma をプロジェクトにセットアップする。 セットアップの最中で尋ねられる質問は、上下キーによる選択、または文字入力によって応答することができる。

> cd [作業ディレクトリのパス]
> karma init

# テストフレームワークの選択。jasmine を選択。
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

 # Require.js を使うかどうか。no を選択
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

# どのブラウザを用いるか。Chrome を選択。ここのみ2回 Enter キーを押下する
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>

# テストコードのファイルはどこにあるか。ここでは空欄のまま Enter
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>

# 除外ファイルの設定。ここでは空欄のまま Enter
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

# karma によるテストコードの変更の自動検知を有効にするか？
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

Config file generated at "[作業ディレクトリパス]\karma.conf.js".

最終行に出力されたメッセージ通り、作業ディレクトリ直下に karma.confi.js というファイルが生成されていることを確認する。

karma.confi.js を編集する

どの JS ファイルが実行するべきテストコードなのか、 karma が認識できるようにする。

好みのエディタで karma.conf.js を開き、以下のように編集する。 17行目付近にあるはず。

files: [
    'spec/*.js'
]

spec ディレクトリ以下の全ての JS ファイルが実行するべきテストコードである、と指定した。

動作確認のためのテストコードを作る

karma が動作するか確かめるために、jasmine でテストコードを作成する。 まずは、失敗するテストを作る。先ほど指定した spec ディレクトリ 以下に保存する。

describe('Hello Test', function() {
    it('Test', function() {
        var targetText = 'ほげほげ';
        var expectText = 'ふがふが';
        expect(expectText).toBe(targetText);
    });
});

karma を実行

karma.conf.js が存在するディレクトリで、次のコマンドを実行する。 テストを走らせるためにブラウザが立ち上がり、コンソールではテスト結果が表示される。

> karma start karma.conf.js

INFO [karma]: Karma v0.12.36 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [web-server]: 404: /favicon.ico
INFO [Chrome 43.0.2357 (Windows 8.1 0.0.0)]: Connected on socket tL1PdgKMKy9jPlXokEa- with id 89314150
Chrome 43.0.2357 (Windows 8.1 0.0.0) Hello Test Test FAILED
        Expected 'ほげほげ' to be 'ふがふが'.
            at Object.<anonymous> ([作業ディレクトリ]/spec/helloSpec.js:5:28)
Chrome 43.0.2357 (Windows 8.1 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.021 secs / 0.013 secs)

テスト名：HelloTest のテストが失敗した。このテストでは 変数：targetText の値に「ふがふが」を期待していたのに、実際の値は「ほげほげ」だったからだ。

テストが成功するよう修正する

では、テストが成功するようにテストコードを修正しよう。

describe('Hello Test', function() {
    it('Test', function() {
        var targetText = 'ふがふが'; // ここを変更
        var expectText = 'ふがふが';
        expect(expectText).toBe(targetText);
    });
});

次に karma を停止して、再起動…。をする必要はない。karma はテストコードの変更を検知し、自動的にテストを再実行してくれるのだ。私たちはテストコードの修正にだけ意識を向ければよい。 テストコードを修正して保存したならば、テストが実行されているはずだ。コンソールを見てみよう。

INFO [watcher]: Changed file "[作業ディレクトリ]/spec/helloSpec.js".
Chrome 43.0.2357 (Windows 8.1 0.0.0): Executed 1 of 1 SUCCESS (0.007 secs / 0.001 secs)

karma が helloSpec.js の変更を検知し、テストが再実行された。 今度はテストが成功した。

karma と jasmine の環境構築は以上。