qunit を使用した JavaScript 単体テストの開始

通常、コードの開発中に自動単体テストを行うことをお勧めします。ユニットテストでは、特定の動作についてコードの最小単位をテストします。単体テストは、開発サイクルの早い段階でコードのバグを見つけるのに役立ちます。

Dhananjay Kumar Last Updated Feb 25, 2025 8min read

基本的に、ユニットテストは、開発フェーズでコードの特定のユニットの動作を検証するコードの一部です。単体テストは、テストランナーによって複数回実行され、異なる入力セットに対する特定のコード単位の動作を検証できます。今日、ほとんどのアプリケーション開発者はアジャイルとTDDのアプローチを堅持しています。

テスト駆動開発アプローチでは、最初に単体テストを記述し、失敗した場合は、テストに合格するためのアプリケーションコードを記述します。JavaScript では、単体テストは他のプログラミング言語と大差ありません。JavaScript で単体テストや TDD を行うには、テストフレームワークが必要です。次のような多くの一般的なJavaScriptテストフレームワークが利用可能です。

Mocha
Jasmine
QUnit
JSUnit

この記事では、jQueryチームが提供する単体テストフレームワークであるQUnitに焦点を当てます。豊富なテストアサーションのセット、情報量の多いテストスイート UI、同期および非同期コールバックのサポート、テストモジュールのサポートなどを提供します。この投稿では、次の内容について説明します。

最初の単体テストの記述
テストスイートのUIを控えめに表現する
アサーションを見る
テストのグループ化

最初のテストの記述

まず、JavaScript 単体テスト用の QUnit の設定から始めましょう。HTML ページ上の 2 つの QUnit ファイルへの参照を追加する必要があります。プロジェクト内にファイルをローカルに持つことも、jQuery CDN の参照を使用することもできます。以下に示すように、CDNオプションを使用します。

Source file

<head>
    <title>Test Page</title>  
    <link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.16.0.css">  
    <script src="//code.jquery.com/qunit/qunit-1.16.0.js"></script>  
</head>

次に、HTML ページの本文に 2 つの div が必要であり、1 つはid qunitである必要があります。

Source file

1 <body>
2  <div id="qunit"></div>  
3  <div id="qunit-fixture"></div>  
4 </body>

テスト環境を設定するためのqunit.jsとqunit.cssの参照を追加しました。Qunit.js はテストランナーとテストフレームワークであり、qunit.css はテストスイートページにスタイルを提供します。

それでは、基本的なテストを書いてみましょう。私は別のtest.jsファイルにテストを書いており、HTMLページにファイルの参照を追加しました。基本的な hello テストは、次のように記述されます。

Source file

QUnit.test("hello test", function (assert) {
     assert.ok(1 == "1", "Passed!");
});

QUnit.testは2つの入力パラメータを取ります。最初のパラメーターはテストの名前で、2 番目のパラメーターは関数です。この関数にはテストコードが含まれており、任意の数のアサーションを含めることができます。

上記のテストでは、単純な ok アサーションを含めました。引数が true と評価された場合、 ok アサーションは true をアサートします。また、テスト結果メッセージを表示するために文字列入力パラメータも取ります。先に進んでテストを実行すると、以下に示すように出力が得られるはずです。

テストスイートでは、QUnitは1つのテストのうち1つが合格したというメッセージを出しています。次に、テストを失敗するように変更し、QUnit が失敗したテストに関する情報をどのように提供するかを調べてみましょう。以下に示すように、テストを変更しました。

Source file

QUnit.test("hello test", function (assert) {
    assert.ok(1 == "2", "Passed!");
});

もう一度、テストを実行すると、QUnitは以下に示すように、テストスイートで失敗したテストに関する情報を提供します。

失敗したテストについて、QUnitは次の情報を提供しています。

期待される結果
Actual result
差
失敗したテストの原因

この情報を使用して、失敗したテストの原因と理由を簡単に見つけることができます。

Understanding the Test Suite UI

テストスイートでは、QUnitはテスト結果を表示します。テストスイートのヘッダーにはテストページのタイトルが表示され、ヘッダーの下には緑または赤のバーがあります。緑色のバーはすべてのテストに合格したことを示し、赤色のバーは少なくとも 1 つのテストが失敗したことを示します。バーの下には、次の 3 つのチェックボックスがあります。

Hide passed tests
グローバルを確認する
トライキャッチなし

最初のチェックボックスをオンにすると、成功したすべてのテストをテストスイートから非表示にできます。これは、テストが多数あり、セット内で失敗したテストを少なくしたい場合に非常に便利です。

「グローバル変数を確認」チェックボックスをオンにすると、テスト実行の前後にすべての Windows オブジェクトプロパティのリストを作成するように QUnit に指示します。QUnitは違いをチェックし、違いに遭遇した場合、テストは失敗します。

「No try-catch」チェックボックスをオンにすると、テストが例外をスローしたときにネイティブ例外をスローするようにQUnitに指示できます。このオプションでは、QUnitは、テストの例外が原因でテストランナーが停止したときに、ブラウザでネイティブ例外をスローすることを確認し、デバッグに役立ちます。

チェックボックスのヘッダーの下にある青いバーには、navigator.userAgentに関する情報が表示されます。青いバーの下にはテストの概要があり、すべてのテストの実行にかかった合計時間に関する情報が表示されます。また、失敗したアサーションと成功したアサーションの数に関する情報も表示されます。

テストの概要の下にはテスト結果が表示され、番号の横にテスト名が付いた番号形式で表示されます。中括弧内のテスト名、成功したアサーションの数の横に、失敗したアサーションの数とアサーションの合計数が表示されます。右隅には、特定のテストにかかった時間が表示されます。失敗した各アサーションのテスト結果には、期待される結果、実際の結果、違い、および失敗したテストのソースが表示されます。

Assertions

QUnitは、さまざまな種類のアサーションを提供します。アサーションは、ユニット・テストの最も重要なコンポーネントです。テストでは、期待される結果と実際の結果をアサートし、テストフレームワークはこれら 2 つの結果を比較して結果を生成します。QUnitは、以下を含む約13のアサーションを提供します。

ok()
equal()
deepEqual()
async()
期待する()
notDeepEqual()
notEqual()
notPropEqual()
notStrictEqual()
propEqual()
push()
スロー()
strictEqual()

次のセクションでは、これらのうちの 2 つを見て、他の記事でアサーションに焦点を当てます。最も単純なアサーションはok()です。引数は 2 つあり、1 つ目は評価対象の式、2 番目の引数はオプションの 2 つ目はテスト結果メッセージです。

最初の引数が true と評価されたために式が合格した場合、アサートは合格するか、そうでない場合は失敗します。ok アサーションの一部を以下に示します。

Source file

QUnit.test("Test 1", function (assert) {
    assert.ok(1 == "1", "1 is ok with 1 : OK");
    assert.ok(true, "true is ok : OK");
    assert.ok(false, "false is not ok : fails");
    assert.ok(NaN, "NaN is not ok : fails");
    assert.ok(null, "null is not ok : fails");
    assert.ok(undefined, "undefined is not ok : fails");
});

テストスイートでは、NaN、undefined、nullなどの場合、okアサーションが失敗することがわかります。

イコールアサーションを見てみましょう。equal アサーションでは、== 演算子を使用して、実際の引数と予想される引数を比較します。In は 2 つの必須引数と 1 つのオプション引数を取ります。最初の引数は実際の値、2 番目の引数は期待値、オプションの 3 番目の引数はテスト結果メッセージです。

最初の引数は実際の値、2 番目の引数は期待値、オプションの 3 番目の引数はテスト結果メッセージです

等価アサーションの一部を以下に示します。ここでは、それらが等しいかどうかをテストするために2つの引数を渡しています。

Source file

QUnit.test("Test 1", function (assert) {
     assert.equal(1,1, "1 is equal to 1 : PASS");
     assert.equal(null,null, "null is equal to null : PASS");
     assert.equal(0,false, "0 is equal to false : PASS");
     assert.equal(0, "zero", "0 is not equal to zero : FAILS");
     assert.equal("", "","Empty is equal to Empty : PASS");
});

テストスイートでは、等しいアサーションの動作を確認できます。

テストのグループ化

テストは、QUnit.module()を使用して論理的にグループ化できます。特定のテストグループは、単独で実行できます。副作用を避けるために、テストをグループ化することをお勧めします。QUnit.moduleを使用すると、テストを次のようにグループ化できます。

Source file

QUnit.module("Test Group 1");
QUnit.test("Test 1 TG1", function (assert) {
    assert.equal(1,1, "1 is equal to 1 : PASS");
});
QUnit.test("Test 2 TG1", function (assert) {
     assert.ok(true, "this test will return true : PASS");
});
 
QUnit.module("Test Group 2");
QUnit.test("Test 1 TG2", function (assert) {
     assert.equal(null,null, "null is equal to null : PASS");
});
QUnit.test("Test 2 TG2", function (assert) {
    assert.ok(false, "this test will return true : FAIL");
});

テストスイート UI では、テスト結果をテストグループにグループ化して表示できます。

また、赤/緑のバーの下のドロップダウンからテストグループを選択することで、特定のテストグループのテスト結果を表示するようにフィルタリングすることもできます。

結論

この記事では、QUnit を使用した JavaScript ユニットテストから始めました。最初の単体テストの作成方法を学び、テストスイートの UI について説明し、さまざまな種類のアサーションを調査し、テストのグループ化を確認しました。他の単体テストと QUnit のトピックについて詳しく説明する今後の記事にご期待ください。

操作方法