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

動作確認

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

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

 今回、サンプルプロジェクトのベースディレクトリとして、ディレクトリ ~/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 向けにテストコードを構成するやり方も、おいおい調査の上、紹介したいと思います。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください