JavaScriptのテストツール「testem」が素晴らしいぞ

mach3 — Wed, 31 Oct 2012 00:30:00 +0000

JavaScriptユニットテスト一年生の私が、Nettuts+ のチュートリアルで知ったテストツール「testem」のお陰で大変捗ったので是非お勧めしたく、ここで紹介してみます。

testem ってなに

testem

testem via GitHub : airportyh/testem

Unit testing in Javascript can be tedious and painful, but Testem makes it so easy that you will actually want to write tests.

要するに、面倒なJSのユニットテストをより快適にしてみんなでハッピーにテスト書こうよ！というツールです。 testem自体はnode.jsベースで動作し、Jasmine/QUnit/Mochaに対応しています。（デフォルトはJasmine）

test’em は“Test them”の省略形でしょう。どんなテストもまとめて引き受けますよ！という事だと思います。

具体的になにしてくれるの

例えばJasmineで「基礎的で面倒なテストの開始の仕方」をした場合、

Jasmineのコードをとってきて設置し、

SpecRunner.html を編集し、

ブラウザでそのHTMLを開き、

テストを書いてブラウザをリフレッシュする

と、こんな感じの作業をプロジェクトの度に繰り返す事になります。

これが、testemでは

設定ファイルを書く

testem コマンドを叩く

だけでテストが始まります。

インストール

もしnode.jsが既にインストールされている環境ならば、npmコマンドだけで簡単に導入できます。（node.jsがまだ入っていないのであれば、まずそちらを先にインストールしましょう）

$ npm install -g testem

正常にインストールできませんでしたか？環境によってはsudoが必要になるかもしれません。

$ sudo npm install -g testem

これでtestemコマンドが使えるようになったはずです。ヘルプでも覗いてみましょう。

$ testem -h

テストをしてみよう

早速テストをしてみようと思います。仮に、次のようなディレクトリ構造にしてみましょう。 scripts/.js がテスト対象のライブラリ、tests/.js がテストです。 testem.json が設定ファイルになります。

./
├ scripts/
│   └ foobar.js
├ tests/
│   └ test-foobar.js
└ testem.json （設定ファイル）

設定ファイルを書く

設定ファイルはJSONで記述します。必要最低限の設定は、こんな感じになります。

{
    "framework" : "jasmine",
    "src_files" : [
        "scripts/foobar.js",
        "tests/test-foobar.js"
    ]
}

framework

使いたいテストフレームワークを書きます。デフォルトはJasmineなので、Jasmineを使う場合は省略できます。
src_files

読み込むソースファイルを配列で記述しておきます。

テストを開始する

testemコマンドを叩けばテストは開始されます。

$ testem

実行すると次のような画面が表示されます。

表示されたURL（http://localhost:7357）を、テストしたいブラウザで開きます。すると…

ブラウザにはJasmineのテスト結果が。

ターミナルにもテスト結果が表示されます。

ファイル更新を検知してくれる

ソースファイルあるいはtestem.jsonを編集すると、更新を検知してブラウザとターミナルを自動的にリフレッシュしてくれます。わざわざブラウザをアクティブにして更新する必要はありません。後はひたすらテストを書いていくのみです。

実行時に自動的にブラウザを開く

わざわざURLをコピーしてブラウザのアドレスバーに貼り付けるのが面倒！そんな人の為に、“launch_in_dev”という設定項目があります。設定ファイルにこれを追記する事で、testemコマンド実行時に自動的に、指定したブラウザでURLを開いてくれます。

{
    "launch_in_dev" : [
        "Chrome"
    ],
    ...
}

使えるブラウザのリストは、次のコマンドで知ることができます。

$ testem launchers

Windows環境ならIE7,IE8,IE9等も表示されますね。公式のREADMEによれば、IE9のモード切り替えでのテストだそうです。

ただし、この設定はテスト開始時に新しいウィンドウを開いてしまいます。その開き方が好きでない方は、大人しくブックマークに登録しておきましょう。（私はそうしました）

Nettuts+ のチュートリアル

基本的な部分は上で紹介していますが、CofeeScriptのコンパイルを挟んだりなど、もう少し突っ込んだ使い方はNettuts+のチュートリアル動画でわかりやすく解説されていました。英語ですが、作業画面見ているだけでも参考になると思います。

Make JavaScript Testing Fun With Testem – YouTube

cf) Make JavaScript Testing Fun With Testem | Nettuts+

まとめ

面倒な部分を全部任せられるので、快適にテストをはじめられますね。テストフレームワークだけでも有難いのに、至れり尽くせりで幸せです。

Testem – Mach3.laBlog