JasmineによるJavaScriptのテスト その2

記事タイトルとURLをコピーする

JasmineによるJavaScriptのテスト その2

前回のJasmineによるJavaScriptのテスト その1に引き続き、今回もJasmineのチュートリアルになります。今回は、JavaScriptの組み込みクラスであるArrayを対象に、簡単なテストの作成と実行を行います。

基本的なテストの書き方

前回、Jasmineのインストール方法として

  • JavaScript単独のプロジェクトで使用する場合(jasmine-standalone-X.X.X.zipを展開)
  • Rubyプロジェクトとともに使用する場合(gem install jasmineを実行)

の2通りの方法を紹介しましたが、テストの書き方は基本的にいずれの場合も同じで実行方法が異なっています。このチュートリアルでは、より汎用的な「JavaScript単独のプロジェクトで使用する場合」を例に説明していきます(Rubyプロジェクトとともに使用する場合については機会を改めて解説する予定です)。

最初のテスト

最初のサンプルとして、JavaScriptの組み込みクラスArrayのテストを以下に示します。

上記のように、テストは、

  • describeメソッドにクラス等のテスト対象を記述し...
  • describeメソッド内に入れ子になったitメソッドにテスト対象の振る舞いを記述し...
  • itメソッド内に入れ子になったexpectメソッドの引数にテスト対象を記述し...
  • toXXXXXメソッドの引数に期待値を記述する

という構造をしています。

ちなみに、上記のサンプルは、

  • テスト対象となる配列arrを作成し...
  • arr.length3であることを確認する

という内容です(expectメソッドの書き方については次回解説します)。

では実際に上記サンプルの動作を確認してみましょう。

テストを実行するには、まず上記のテストコードをプロジェクトディレクトリのspec/ArraySpec.jsとして保存します。

次に、保存したArraySpec.jsを実行するため、プロジェクトディレクトリ直下のSpecRunner.htmlを以下のような内容にします。

あとはSpecRunner.htmlをブラウザで開くだけです。


ん、文字化けしてますね。デフォルトのSpecRunner.htmlのままでは、日本語を使用した場合にブラウザによっては文字化けすることがあります。

Web開発をされている方ならもちろんお分かりだと思いますが、これはJasmineの問題ではなく、よくあるHTMLの文字化けです。SpecRunner.htmlのHEAD要素内に以下の1行を記述すれば文字化けは直ります(ファイルの文字コードエンコーディングがUTF-8の場合)。

ブラウザをリロードすると、以下のようにテストの実行結果が正しく表示されます。


このテスト結果をよく見ると、

Arrayクラスはlengthプロパティで配列長を取得する事ができる」という仕様が成功(グリーン)

と読めるのではないでしょうか?

このことからも、Jasmineのテストは「自然言語で記述された要求仕様書のように見える」というビヘイビア駆動開発(BDD)の特徴を持っていることがわかるかと思います。

次回は、xUnit系のテスティングフレームワークとの対比を中心に説明していきます。