CentOS6 上で karma + Jasmine + Chrome を使った JavaScript のテスト監視システムを作る

はじめに

AngularJS や React.js といったクライアントサイド JS フレームワークや、Node.js のようなサーバーサイド JS フレームワークを使ったプロジェクトに対して、karma + Jasmine + Chrome でテストできるような環境が欲しくなりましたので、今回構築してみました。構築する OS は CentOS6 で、Chrome を起動する必要があるため、Gnomeデスクトップ環境で構成します。

大まかな構築手順は下記のとおりです。

構築手順
- node.js と npm のインストール
- Chrome のインストール
- karma と Jasmine のインストール
動作確認
- サンプルプロジェクトの準備
- テスト設定生成
- テスト実行

構築手順

node.js と npm のインストール

node.js と npm のインストールを参照してください。

Chrome のインストール

Chrome のインストールを参照してください。

karma と Jasmine のインストール

今回、ユーザーエリアにインストールします。また、パスが通りませんので、エイリアスとして登録して使いやすくします。

$ cd ~/
$ npm install karma karma-jasmine
$ echo 'alias karma="${HOME}/node_modules/karma/bin/karma"' >> ~/.bashrc
$ source ~/.bashrc

今回、karma から Chrome を起動させるため、Chrome Launcher もインストールします。

$ npm install karma-chrome-launcher

環境変数 CHROME_BIN に Chrome の実行ファイルを指定しておく必要があります。次のコマンドを実行して、環境変数に登録してください。

$ echo 'export CHROME_BIN="/opt/google/chrome/chrome"' >> ~/.bashrc
$ source ~/.bashrc

動作確認

構築がおわったら、簡単なテストを書いてみて、動作確認としたいと思います。

サンプルプロジェクトの準備

今回、サンプルプロジェクトのベースディレクトリとして、ディレクトリ ~/work/karma-sample を準備します。

$ mkdir -p ~/work/karma-sample/{test,app}

テストコードもこのタイミングで準備してしまいましょう。実はこのテストコードはわざと FAIL するようにしています。FAIL を確認したあと、問題を修正してから PASS することを確認しようという算段です。

test/SimpleEqualSpec.js

/**
 * Equal Test
 */
describe( 'Equal Test -', function () {

  it( 'Text', function () {
    var result = 'text-dummy';
    expect(result).toEqual('text-ok');
  });

  it( 'Simple Sentence', function () {
    var result = 'a smple sentence.';
    expect(result).toMatch(/simple/);
  });
});

テスト設定生成

下記のように karma init コマンドを実行します。プロンプトが表示されますので、1点だけ、テストコードのファイル指定を、「test/unit/*Spec.js」と入力します。他は何も入力しないままで構いません。この指定で、ディレクトリ test/unit/ にあるファイルのうち、「Spec.js」で終わるファイルがテストコードとして karma で実行されるようになります。既存のプロジェクトに合わせて指定してください。なお、ここで設定した内容はあとから変更できます。このプロンプトを完了すると、「karma.conf.js」というファイルが生成されますので、これを編集してください。

$ cd ~/work/karma-sample
$ karma init

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 plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>

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.
> test/unit/*Spec.js
>

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.
>

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 "/home/tester/work/karma-sample/karma.conf.js"

テスト実行

いよいよテスト実行です。下記のようにコマンドを実行してください。Chrome が起動したあと、テストが実行されて、結果がターミナルに表示されます。

$ karma start

きちんと 2 つとも FAIL しました。

INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 31.0.1650 (Linux)]: Connected on socket Jyy-xp7DMHHsDCOOF0gS with id 69658940
Chrome 31.0.1650 (Linux) Equal Test - Text FAILED
	Expected 'text-dummy' to equal 'text-ok'.
	    at Object. (/home/tester/work/karma-sample/test/SimpleEqualSpec.js:8:20)
Chrome 31.0.1650 (Linux) Equal Test - Simple Sentence FAILED
	Expected 'a smple sentence.' to match /simple/.
	    at Object. (/home/tester/work/karma-sample/test/SimpleEqualSpec.js:13:20)
Chrome 31.0.1650 (Linux): Executed 2 of 2 (2 FAILED) ERROR (0.043 secs / 0.021 secs)

result に代入している値を修正して、Pass させたものが下記です。なお、karma start を実行したターミナル以外でテストコードを修正してみてください。ファイルの変更を検出して、自動的に再テストが実行されるはずです。

INFO [watcher]: Changed file "/home/tester/work/karma-sample/test/SimpleEqualSpec.js".
Chrome 31.0.1650 (Linux): Executed 2 of 2 SUCCESS (0.018 secs / 0.004 secs)

おわりに

今回は JS フレームワークを絡めず、karma + Jasmine だけでテストを実行してみました。AngularJS や Node.js 向けにテストコードを構成するやり方も、おいおい調査の上、紹介したいと思います。