jQuery ユニットテストライブラリ QUnit を試してみました

ユニットテスト jQuery QUnit

QUnit という jQuery ユニットテスト用ライブラリがあります。

テスト用の HTML ファイルを別途用意し、test(name:String, test:Function) でテストケース関数をキューに追加していきます。　テストは HTML ファイルをブラウザで開くと同時に実行され、div#qunit-fixture または div#main 等の QUnit 用 DOM 要素群に結果が挿入されます。


基本的にはライブラリフォルダ qunit/test/index.html のソースコードをテンプレートとして利用できます。
HTML の <body> 内はそのままで構いません。　検証したい JavaScript ファイルをインポートし、新たに <script> タグを追加してテストケースを定義しましょう。

<!DOCTYPE html>
<html>
<head>
    <title>QUnit Test Suite</title>

    <!-- import qunit modules -->
    <link rel="stylesheet" href="./qunit/qunit.css" type="text/css" media="screen">
    <script type="text/javascript" src="./qunit/qunit.js"></script>

    <!-- import javascript files -->
    <script type="text/javascript" src="../static/js/xxx.js"></script>

    <!-- qunit test case -->
    <script type="text/javascript">
        test('test name', function() {
            var expectValue = 'xxx';
            same(xxx(),  // xxx.js で定義した関数
                 expectValue,  // 期待される値
                 'We expect value to be |' + expectValue + '|');  // ２引数の値が異なる場合に出力するメッセージ
        });
    </script>

</head>

<body>
    <h1 id="qunit-header">QUnit Test Suite</h1>
    <h2 id="qunit-banner"></h2>
    <div id="qunit-testrunner-toolbar"></div>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests"></ol>
    <div id="qunit-fixture">test markup</div>  <!-- or #main -->
</body>
</html>

別の例ですが、テスト実行結果は以下のように表示されます。

  • 主要なAPI
    • test( name:String, test:Function )

　　　　　テストケース関数をキューに追加する。

    • ok( state:Boolean[, message:String] )

　　　　　state が偽の場合、テスト失敗を通知する。

    • equal( actual:Object, expected:Object[, message:String] )

　　　　　actual と expected が == 演算で等しくない場合、テスト失敗を通知する。

    • deepEqual( actual:Object, expected:Object[, message:String] )

　　　　　actual と expected が === 演算で等しくない場合、テスト失敗を通知する。
　　　　　オブジェクト同士（ID に依存しない）の比較はこちらを用いる。


QUnit.deepEqual は昔の QUnit.same に等しく、QUnit.equal は昔の QUnit.equals に等しい。

詳細はこちら