Mach3.laBlog

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

この記事は賞味期限切れです。(更新から1年が経過しています)

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

testem ってなに

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で「基礎的で面倒なテストの開始の仕方」をした場合、

  1. Jasmineのコードをとってきて設置し、
  2. SpecRunner.html を編集し、
  3. ブラウザでそのHTMLを開き、
  4. テストを書いてブラウザをリフレッシュする

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

これが、testemでは

  1. 設定ファイルを書く
  2. 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+

まとめ

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

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

jQueryプラグインを作りつつ開発環境パワーアップ! | それなりブログd41d8cd98f00b204e9800998ecf8427e
testemで任意のHTMLでテストを動かす方法とJavaScriptデバッガ連携 | Web scratchd41d8cd98f00b204e9800998ecf8427e
mach32ac00a19d261ed2dfb9c3434899a1ce9
<p>コメントありがとうございます!
動作確認はWindows/Mac共に行いました。普段実際にコードを書くのはMacが多いので、主にそちらで運用しています。</p>
regepan7114db186cb31a7c9e2e92db410df4c7
<p>こんにちわ。
エントリーを元に実験させていただきました。
Windows環境でもうまく動作している様です。
mach3さんはMac環境で実行されてますか?
なにで実行されてるのか気になりましたので。
公開して問題なさそうでしたら教えて頂ければと思います。</p>