mocha-chrome + chaiでJavascriptの単体テストコードを書く(2)

headless-chrome

前回のサンプルコードの解説です。

まず、mocha + chaiを使うのでそれをテスト用のHTMLに組込む処理が必要です。具体的には

  • mocha.css及びmocha.jsの組込み
  • chai.jsの組込み

が必要で、それらは普通のcss及びjs同様HTMLの<link href="…" rel="stylesheet">及び<script src="…">を使用します。
これらについては特に補足は不要ですね。サンプルではtest.htmlと同じフォルダにnode_modules/がある前提ですので必要に応じてパスの変更ぐらいかと思われます。

また、テスト対象コードは今回サンプルなのでHTML中に埋込みましたが、実務上は外部のJSファイルを読込むことになろうかと思います。
<script>でもrequireでも方法は問いませんのでテスト用のHTMLからグローバル関数としてアクセス可能になるようにしてください。

なお、HTMLのBODY中に記載している

    <div id="mocha"></div> <!-- テスト結果表示領域の確保 -->

の部分は（ヘッドレスでない普通の）ブラウザ用で、これを記載した場所にテスト結果が表示されます。
idは必ず"mocha"である必要があるのと、別途、初期化処理として"mocha.setup()"を実行する必要があります。
特に後者はmocha-chromeの公式サイトのサンプルには記載がありませんので注意してください。

テストコードは

    <script> /* テストコード */
        // 初期化
        mocha.setup('bdd');
        expect = chai.expect;

        // ここにテストコードを書く
...
        // 単体テストの実行
        mocha.run();
    </script>

の部分です。初期化と単体テストの実行の部分は「お約束」ということでこのまま記載してください。

ここまでがどんなテストの場合でも固定的に記載する内容で、いよいよテストコード本体の説明となります。

        // ここにテストコードを書く
        describe('add test', function() {
            it('should return 3 when arg1 is 1 and arg2 is 2', function() {
                expect(add(1,2)).to.be.equal(3);
            });
        });

テストコード本体の構文は大きく分けて以下の3つとなります。

  • describe()
  • it()
  • expect()

describe()はテストの目的を記載するものです。第1引数の文字列はテストを識別するための表示用で、テスト結果には影響しません。
またdescribe()はネストさせることができ、これはテストの分類に使うと便利です。
it()は1つのテスト範囲を示すものです。この第1引数の文字列も表示用で、テスト結果には影響しません。

テスト結果に影響するのはexpect()になります。

expect(実行結果).to.be.equal(期待値);

が基本形です。
このexpect()を提供しているのがchaiで、逆にいうとchai以外のassertionライブラリを使う場合はここの書き方が変わります。
また、".to.be.equal"「期待値と等しい」以外のテストを行いたい場合はchaiのAPI Reference(BDD)
Expect / Should - Chai
を参照してください。例外が発生したかをチェックできる".throw"等も用意されています。

it()の中に書けるのはexpect()だけではありません。必要に応じて、

it('…', function() {
    前処理;
    expect(実行結果).to.be.equal(期待値);
    後処理;
});

という書き方もできます。

ここまでの説明で一般の関数に対する単体テストコードは書けるものと思いますが、非同期処理については少し補足が必要です。
次回(3)ではそれを説明します。