2015年03月14日

QUnitでJavaScriptのUniteTest

軽くJavaScriptのテストをする用事があったので、QUnitを使う。

http://qunitjs.com/

とりあえず最小コードでテスト。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>QUnit Example</title>
    <link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.17.1.css">
  </head>
  <body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
    <script src="//code.jquery.com/qunit/qunit-1.17.1.js"></script>
    <script>
      QUnit.test( "hello test", function( assert ) {
        assert.ok( 1 == "1", "通ったよ" );
        assert.ok( 2 == "1", "通らないよ" );
      } );
    </script>
  </body>
</html>

qunitqunit-fixtureというIDのdiv要素を用意して、QUnit.testでassertを実行しています。

これをブラウザで表示すると、下記のように出力されます。

qunit

assertで「通らないよ」と書いた方は、2 == "1"としているので、もちろん引っかかってレッドになります。

手軽に使えて良いですね。

上記ではassert.okを使っていますが、assertには他にも関数が用意されています。

下記はassertのリファレンスです。

http://api.qunitjs.com/category/assert/

  • ok(boolean判定でtrueであることを確認)
  • equal(等しいことを確認)
  • notEqual(等しくないことを確認)
  • deepEqual(objectの中身が等しいかも確認できる)
  • strictEqual(===と同じく型も含めて確認)
  • async(非同期処理が終わるのを待つ)

手元のモジュールが正しく動作しているかを確認する分には、これくらいの機能があれば十分そうです。