QUnit-概要

テストは、アプリケーションが機能するかどうかをアプリケーションの機能をチェックして、開発者レベルで単体テストが実行されることを確認するプロセスです。単体テストは、単一のエンティティ（クラスまたはメソッド）のテストです。ユニットテストは、すべてのソフトウェア組織がクライアントに高品質の製品を提供するために非常に重要です。

ユニットテストは、次の表に示す2つの方法で実行できます。

Manual testing	Automated testing
Executing the test cases manually without any tool support is known as manual testing.	Taking tool support and executing the test cases using automation tool is known as automation testing.
Time consuming and tedious. Since the test cases are executed by human resources, it is very slow and tedious.	Fast Automation. Runs test cases significantly faster than human resources.
Huge investment in human resources. As test cases need to be executed manually, more number of testers are required.	Less investment in human resources. Test cases are executed using automation tool hence, less number of testers are required.
Less reliable, as tests may not be performed with precision each time due to human errors.	More reliable. Automation tests perform precisely the same operation each time they are run.
Non-programmable. No programming can be done to write sophisticated tests, which fetch hidden information.	Programmable. Testers can program sophisticated tests to bring out hidden information.

QUnitとは何ですか？

QUnitは、JavaScriptプログラミング言語の単体テストフレームワークです。テスト駆動開発では重要であり、jQuery、jQuery UI、およびjQuery Mobileプロジェクトで使用されます。 QUnitは、一般的なJavaScriptコードベースをテストできます。

QUnitは、「最初にテストしてからコーディングする」という考え方を推進しています。これは、最初にテストしてから実装できるコードのテストデータの設定に重点を置いています。このアプローチは、「少しテスト、少しコード、少しテスト、少しコード…」のようなもので、プログラマの生産性とプログラムコードの安定性を高め、プログラマのストレスとデバッグに費やす時間を削減します。

QUnitの機能

QUnitは、テストの作成と実行に使用されるオープンソースフレームワークです。以下は、その最も顕著な特徴です-

QUnitは、期待される結果をテストするためのアサーションを提供します。
QUnitは、テストを実行するためのテストフィクスチャを提供します。
QUnitテストを使用すると、コードをより速く書くことができ、品質が向上します。
QUnitはエレガントでシンプルです。それほど複雑ではなく、時間がかかりません。
QUnitテストは自動的に実行でき、独自の結果を確認してすぐにフィードバックを提供します。テスト結果のレポートを手動で確認する必要はありません。
QUnitテストは、テストケースやその他のテストスイートを含むテストスイートに整理できます。
QUnitは、テストが正常に進行している場合は緑色のバーでテストの進行状況を表示し、テストが失敗すると赤色に変わります。

ユニットテストケースとは何ですか？

ユニットテストケースは、コードの別の部分（メソッド）が期待どおりに動作することを保証するコードの一部です。目的の結果を迅速に達成するには、テストフレームワークが必要です。 QUnitは、JavaScriptプログラミング言語用の完璧な単体テストフレームワークです。

公式の書面による単体テストケースは、既知の入力と期待される出力によって特徴付けられ、テストの実行前に解決されます。既知の入力は前提条件をテストし、予想される出力は事後条件をテストする必要があります。

要件ごとに少なくとも2つのユニットテストケースが必要です。1つは陽性テスト、もう1つは陰性テストです。要件に下位要件がある場合、各下位要件には少なくとも2つのテストケースが陽性および陰性である必要があります。

QUnit-環境設定

QUnitを使用するには2つの方法があります。

ローカルインストール-ローカルマシンにQUnitライブラリをダウンロードして、HTMLコードに含めることができます。
* CDNベースのバージョン*-Content Delivery Network（CDN）から直接HTMLコードにQUnitライブラリを含めることができます。

ローカルインストール

[[1]]
ダウンロードした qunit-git.js および qunit-git.css ファイルをWebサイトのディレクトリに配置します。/jquery。

例

次のように、HTMLファイルに qunit-git.js および qunit-git.css ファイルを含めることができます-

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "/jquery/qunit-git.css">
      <script src = "/jquery/qunit-git.js"></script>
   </head>

   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div>
      <script>
         QUnit.test( "My First Test", function( assert ) {
            var value = "1";
            assert.equal( value, "1", "Value should be 1" );
         });
      </script>
   </body>
</html>

これにより、次の結果が生成されます–

CDNベースのバージョン

コンテンツ配信ネットワーク（CDN）から直接HTMLコードにQUnitライブラリを含めることができます。

'_このチュートリアルでは、jQuery CDNバージョンのライブラリを使用しています。_

例

jQuery CDNのQUnitライブラリを使用して、上記の例を書き直しましょう。

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>

   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div>
      <script>
         QUnit.test( "My First Test", function( assert ) {
            var value = "1";
            assert.equal( value, "1", "Value should be 1" );
         });
      </script>
   </body>
</html>

これにより、次の結果が生成されます–

QUnit-基本的な使用法

次に、基本的な例を使用して、QUnitでキックスタートを取得するための段階的なプロセスを示します。

qunit.jsをインポートする

Qunitライブラリのqunit.jsは、テストランナーとテストフレームワークを表します。

<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>

qunit.cssをインポートする

Qunitライブラリのqunit.cssは、テストスイートページのスタイルを設定して、テスト結果を表示します。

<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">

フィクスチャを追加

*id = "qunit"* および *"qunit-fixture"* の2つのdiv要素を追加します。 これらのdiv要素は必須であり、テストのフィクスチャを提供します。

<div id = "qunit"></div>
<div id = "qunit-fixture"></div>

テストする関数を作成する

function square(x) {
   return x * x;
}

テストケースを作成する

2つの引数を指定して、QUnit.test関数を呼び出します。

名前-テスト結果を表示するテストの名前。
機能-1つ以上のアサーションを持つ機能テストコード。

QUnit.test( "TestSquare", function( assert ) {
   var result = square(2);
   assert.equal( result, "4", "square(2) should be 4." );
});

テストを実行する

次に、実行中の完全なコードを見てみましょう。

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>

   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div>

      <script>
         function square(x) {
            return x * x;
         }
         QUnit.test( "TestSquare", function( assert ) {
            var result = square(2);
            assert.equal( result, "4", "square(2) should be 4." );
         });
      </script>
   </body>
</html>

ブラウザにページをロードします。テストランナーは、ページが読み込まれ、テストをキューに追加するときに* QUnit.test（）*を呼び出します。テストケースの実行は、テストランナーによって延期および制御されます。

出力を確認する

次の結果が表示されます-

ヘッダー-テストスイートのヘッダーには、すべてのテストに合格するとページタイトル、緑色のバーが表示されます。それ以外の場合、少なくとも1つのテストが失敗したときの赤いバー、テスト結果をフィルターする3つのチェックボックスが付いたバー、ブラウザーの詳細を表示するnavigator.userAgentテキストが付いた青いバー。
合格したテストのチェックボックスを非表示-合格したテストケースを非表示にし、失敗したテストケースのみを表示します。
グローバルチェックボックスをチェック-各テストの前後にウィンドウオブジェクトのすべてのプロパティのリストを表示するには、違いをチェックします。プロパティを変更すると、テストに失敗します。
* try-catchチェックボックスなし*-try-catchブロックの外部でテストケースを実行して、テストが例外をスローした場合に、テストランナーが停止してネイティブ例外が表示されるようにします。
概要-テストケースの実行にかかった合計時間を示します。実行されたテストケースの総数とアサーションの失敗。
目次-テスト結果を表示します。各テスト結果には、テストの名前に続いて失敗、合格、および総アサーションが含まれます。各エントリをクリックすると、詳細が表示されます。

QUnit-API

QUnitの重要なAPI

QUnitの重要なカテゴリの一部は次のとおりです-

Sr.No.	Category	Functionality
1	Assert	A set of assert methods.
2	Async Control	For asynchronous operations.
3	Callbacks	When integrating QUnit into other tools such as CI servers, these callbacks can be used as an API to read the test results.
4	Configuration and Utilities	These methods and properties are used as utility helpers and to configure QUnit. For example, to adjust the runtime behavior directly, extend the QUnit API via custom assertions, etc.
5	Test	For testing operations.

カテゴリ：アサート

assertメソッドのセットを提供します。

Sr.No.	Methods & Description
1	async() 非同期操作を待つようにQUnitに指示します。
2	deepEqual() プリミティブ型、配列、オブジェクト、正規表現、日付、および関数を処理する、深い再帰的な比較。
3	equal() JUnitのassertEqualsとほぼ同等の、厳密ではない比較。
4	expect() テスト内で実行されるアサーションの数を指定します。
5	notDeepEqual() プリミティブ型、配列、オブジェクト、正規表現、日付、および関数を処理する逆ディープ再帰比較。
6	notEqual() 非厳密な比較、不等式のチェック。
7	notOk() ブールチェック、ok（）およびCommonJSのassert.ok（）の逆、およびJUnitのassertFalse（）と同等。最初の引数がfalseの場合に渡します。
8	notPropEqual() オブジェクト自体のプロパティの厳密な比較、不等式のチェック。
9	notStrictEqual() 厳密な比較、不平等のチェック。
10	ok() CommonJSのassert.ok（）およびJUnitのassertTrue（）と同等のブールチェック。最初の引数がtrueの場合に渡します。
11	propEqual() オブジェクト自体のプロパティの厳密な型と値の比較。
12	push() カスタムアサーションの結果を報告します。
13	strictEqual() 厳密な型と値の比較。
14	throws() コールバックが例外をスローするかどうかをテストし、オプションでスローされたエラーを比較します。

カテゴリ：非同期制御

非同期操作のセットを提供します。

Sr.No.	Methods & Description
1	async() 非同期操作を待つようにQUnitに指示します。
2	QUnit.asyncTest() 非推奨：実行する非同期テストを追加します。テストにはQUnit.start（）への呼び出しを含める必要があります。
3	QUnit.start() 一部廃止：testrunnerが停止した後、テストの実行を再開します。 QUnit.stop（）およびQUnit.config.autostartを参照してください。
4	QUnit.stop() 非推奨：テストランナーが続行する前に待機する必要があるQUnit.start（）呼び出しの数を増やします。
5	QUnit.test() 実行するテストを追加します。

カテゴリ：コールバック

QUnitをCIサーバーなどの他のツールに統合する場合、これらのコールバックをAPIとして使用して、テスト結果を読み取ることができます。

Sr.No.	Methods & Description
1	QUnit.begin() テストスイートの開始時に起動するコールバックを登録します。
2	QUnit.done() テストスイートが終了するたびに起動するコールバックを登録します。
3	QUnit.log() アサーションが完了するたびに起動するコールバックを登録します。
4	QUnit.moduleDone() モジュールが終了するたびに起動するコールバックを登録します。
5	QUnit.moduleStart() モジュールが開始するたびに起動するコールバックを登録します。
6	QUnit.testDone() テストが終了したときに起動するコールバックを登録します。
7	QUnit.testStart() テストの開始時に起動するコールバックを登録します。

カテゴリ：構成とユーティリティ

これらのメソッドとプロパティは、ユーティリティヘルパーとして使用され、QUnitを構成します。たとえば、ランタイムの動作を直接調整するには、カスタムアサーションなどを介してQUnit APIを拡張します。

Sr.No.	Methods & Description
1	QUnit.assert QUnitアサーションの名前空間。
2	QUnit.config QUnitの構成。
3	QUnit.dump.parse() JavaScript用の高度で拡張可能なデータダンプ。
4	QUnit.extend() mixinオブジェクトで定義されたプロパティをターゲットオブジェクトにコピーします。
5	QUnit.init() 非推奨：テストランナーを再初期化します。
6	QUnit.push() 非推奨：カスタムアサーションの結果を報告します。
7	QUnit.reset() 非推奨：DOMのテストフィクスチャをリセットします。
8	QUnit.stack() スタックトレース（呼び出しスタック）を表す1行の文字列を返します。

カテゴリ：テスト

テスト操作のセットを提供します。

Sr.No.	Methods & Description
1	QUnit.assert QUnitアサーションの名前空間。
2	QUnit.asyncTest() 非推奨：実行する非同期テストを追加します。テストにはQUnit.start（）への呼び出しを含める必要があります。
3	QUnit.module() 関連するテストを単一のラベルの下にグループ化します。
4	QUnit.only() テストを排他的に実行するように追加し、他のすべてのテストが実行されないようにします。
5	QUnit.skip() スキップするオブジェクトのようなテストを追加します。
6	QUnit.test() 実行するテストを追加します。

QUnit-アサーションの使用

すべてのアサーションはアサートカテゴリにあります。

このカテゴリは、テストの作成に役立つ一連のアサーションメソッドを提供します。失敗したアサーションのみが記録されます。

Sr.No.	Methods & Description
1	async() 非同期操作を待つようにQUnitに指示します。
2	deepEqual() プリミティブ型、配列、オブジェクト、正規表現、日付、および関数を処理する、深い再帰的な比較。
3	equal() JUnitのassertEqualsとほぼ同等の、厳密ではない比較。
4	expect() テスト内で実行されるアサーションの数を指定します。
5	notDeepEqual() プリミティブ型、配列、オブジェクト、正規表現、日付、および関数を処理する逆ディープ再帰比較。
6	notEqual() 非厳密な比較、不等式のチェック。
7	notOk() ブールチェック、ok（）およびCommonJSのassert.ok（）の逆、およびJUnitのassertFalse（）と同等。最初の引数がfalseの場合に渡します。
8	notPropEqual() オブジェクト自体のプロパティの厳密な比較、不等式のチェック。
9	notStrictEqual() 厳密な比較、不平等のチェック。
10	ok() CommonJSのassert.ok（）およびJUnitのassertTrue（）と同等のブールチェック。最初の引数がtrueの場合に渡します。
11	propEqual() オブジェクト自体のプロパティの厳密な型と値の比較。
12	push() カスタムアサーションの結果を報告します。
13	strictEqual() 厳密な型と値の比較。
14	throws() コールバックが例外をスローするかどうかをテストし、オプションでスローされたエラーを比較します。

上記のメソッドのほとんどを例でカバーしてみましょう。

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>

   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div>
      <script>
         QUnit.test( "TestSuite", function( assert ) {
           //test data
            var str1 = "abc";
            var str2 = "abc";
            var str3 = null;
            var val1 = 5;
            var val2 = 6;
            var expectedArray = ["one", "two", "three"];
            var resultArray =  ["one", "two", "three"];

           //Check that two objects are equal
            assert.equal(str1, str2, "Strings passed are equal.");

           //Check that two objects are not equal
            assert.notEqual(str1,str3, "Strings passed are not equal.");

           //Check that a condition is true
            assert.ok(val1 < val2, val1 + " is less than " + val2);

           //Check that a condition is false
            assert.notOk(val1 > val2, val2 + " is not less than " + val1);

           //Check whether two arrays are equal to each other.
            assert.deepEqual(expectedArray, resultArray ,"Arrays passed are equal.");

           //Check whether two arrays are equal to each other.
            assert.notDeepEqual(expectedArray, ["one", "two"],
               "Arrays passed are not equal.");
         });
      </script>
   </body>
</html>

出力を確認する

次の結果が表示されます-

QUnit-実行手順

この章では、QUnitのメソッドの実行手順について説明します。これは、最初に呼び出されるメソッドとその後に呼び出されるメソッドを示しています。次に、QUnitテストAPIメソッドの実行手順と例を示します。

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>

   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div>
      <script>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });

         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });

         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });

         QUnit.module( "Module B" );
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });

         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });
      </script>
   </body>
</html>

出力を確認する

次の結果が表示されます-

これがQUnitの実行手順です。

モジュールは、テストケースをグループ化するために使用されます。
ただし、テストケースを実行する前に、テストケースごとに* beforeEach（）*メソッドが実行されます。
* afterEach（）*メソッドはテストケースごとに実行されますが、テストケースの実行後に実行されます。
* beforeEach（）と afterEach（）*の間では、各テストケースが実行されます。
もう一度* QUnit.module（）*を呼び出し、以前に別のモジュールで定義されたbeforeEach/afterEach関数をリセットするだけです。

QUnit-テストをスキップ

コードの準備ができておらず、そのメソッド/コードをテストするために記述されたテストケースが実行されると失敗することがあります。 QUnit.skip はこの点で役立ちます。 Skipメソッドを使用して記述されたテストメソッドは実行されません。動作中のSkipメソッドを見てみましょう。

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>

   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div>
      <script>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });

         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });

         QUnit.skip( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });

         QUnit.module( "Module B" );
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });

         QUnit.skip( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });
      </script>
   </body>
</html>

出力を確認する

次の結果が表示されます-

QUnit-テストのみ

時々、コードの準備ができておらず、そのメソッド/コードをテストするために書かれたテストケースが実行されると失敗します。 QUnit.only はこの点で役立ちます。メソッドのみを使用して記述されたテストメソッドは実行されますが、他のテストは実行されません。複数のメソッドのみが指定されている場合、最初のメソッドのみが実行されます。実際のメソッドのみを見てみましょう。

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>

   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div>
      <script>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });

         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });

         QUnit.only( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });

         QUnit.test( "test case 3", function( assert ) {
            assert.ok( true, "Module A: in test case 3" );
         });

         QUnit.test( "test case 4", function( assert ) {
            assert.ok( true, "Module A: in test case 4" );
         });
      </script>
   </body>
</html>

出力を確認する

次の結果が表示されます-

QUnit-非同期呼び出し

QUnit.test（）コールバックのすべての非同期操作に対して、 assert.async（）を使用します。これは、操作が完了したときに呼び出される「完了」関数を返します。 assert.async（）はパラメーターとして呼び出し回数を受け入れます。 assert.async（）から返されたコールバックは、受け入れられた呼び出しカウント（指定されている場合）を超えて呼び出された場合、エラーをスローします。各 done（）*呼び出しは、呼び出しカウントに加算されます。すべての呼び出しが完了すると、テストが完了します。

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>

   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div>
      <script>
         QUnit.test( "multiple call test()", function( assert ) {
            var done = assert.async( 3 );

            setTimeout(function() {
               assert.ok( true, "first callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "second callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "third callback." );
               done();
            }, 500 );
         });
      </script>
   </body>
</html>

出力を確認する

次の結果が表示されます-

QUnit-アサーションを期待する

assert.expect（）*関数を使用して、テストで行われたアサーションの数を確認できます。次の例では、テストで3つのアサーションが行われると予想しています。

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>

   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div>
      <script>
         QUnit.test( "multiple call test()", function( assert ) {
            assert.expect( 3 );
            var done = assert.async( 3 );

            setTimeout(function() {
               assert.ok( true, "first callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "second callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "third callback." );
               done();
            }, 500 );
         });
      </script>
   </body>
</html>

出力を確認する

次の結果が表示されます-

QUnit-コールバック

QUnitをCIサーバーなどの他のツールに統合する場合、これらのコールバックをAPIとして使用して、テスト結果を読み取ることができます。次に、QUnitコールバックAPIメソッドの実行手順と例を示します。

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>

   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div>
      <script>
        //Register a callback to fire whenever a testsuite starts.
         QUnit.begin(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = "<br/>" +
               "QUnit.begin- Test Suite Begins " + "<br/>" +
               "Total Test: " + details.totalTests;
         });

        //Register a callback to fire whenever a test suite ends.
         QUnit.done(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" +
               "QUnit.done - Test Suite Finised" +  "<br/>" + "Total: " +
               details.total + " Failed: " + details.failed + " Passed:
               " + details.passed;
         });

        //Register a callback to fire whenever a module starts.
            QUnit.moduleStart(function( details ) {
               var data = document.getElementById("console").innerHTML;
               document.getElementById("console").innerHTML = data + "<br/><br/>" +
                  "QUnit.moduleStart - Module Begins " +  "<br/>" + details.name;
         });

        //Register a callback to fire whenever a module ends.
         QUnit.moduleDone(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" +
               "QUnit.moduleDone - Module Finished " +  "<br/>" + details.name +
               " Failed/total: " + details.failed +"/" + details.total ;
         });

        //Register a callback to fire whenever a test starts.
         QUnit.testStart(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" +
               "QUnit.testStart - Test Begins " +  "<br/>" + details.module +"
               " + details.name;
         });

        //Register a callback to fire whenever a test ends.
         QUnit.testDone(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" +
               "QUnit.testDone - Test Finished " +  "<br/>" + details.module +" "
               + details.name + "Failed/total: " + details.failed +" " + details.total+
               " "+ details.duration;
         });

         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });

         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });

         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });

         QUnit.module( "Module B" );
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });

         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });
      </script>

      <div id = "console" ></div>
   </body>
</html>

出力を確認する

次の結果が表示されます-

QUnit-ネストされたモジュール

グループ化されたテスト関数を持つモジュールは、ネストされたモジュールを定義するために使用されます。 QUnitは、最初に宣言されている場合でも、ネストされたモジュールを深く調べる前に、親モジュールでテストを実行します。ネストされたモジュール呼び出しの beforeEach および afterEach コールバックは、LIFO（Last In、First Out）モードで親フックにスタックします。引数とフックを使用して、各テストの前後に実行するコードを指定できます。

フックを使用して、各テストのコンテキストで共有されるプロパティを作成することもできます。フックオブジェクトの追加プロパティは、そのコンテキストに追加されます。コールバック引数を指定してQUnit.moduleを呼び出す場合、フック引数はオプションです。

コンテキストをテスト環境として使用して、モジュールのコールバックが呼び出され、環境のプロパティがモジュールのテスト、フック、ネストされたモジュールにコピーされます。

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>

   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div>
      <script>
         QUnit.module( "parent module", function( hooks ) {
            hooks.beforeEach( function( assert ) {
               assert.ok( true, "beforeEach called" );
            });

            hooks.afterEach( function( assert ) {
               assert.ok( true, "afterEach called" );
            });

            QUnit.test( "hook test 1", function( assert ) {
               assert.expect( 2 );
            });

            QUnit.module( "nested hook module", function( hooks ) {
              //This will run after the parent module's beforeEach hook
               hooks.beforeEach( function( assert ) {
                  assert.ok( true, "nested beforeEach called" );
               });

              //This will run before the parent module's afterEach
               hooks.afterEach( function( assert ) {
                  assert.ok( true, "nested afterEach called" );
               });

               QUnit.test( "hook test 2", function( assert ) {
                  assert.expect( 4 );
               });
            });
         });
      </script>

      <div id = "console" ></div>
   </body>
</html>

出力を確認する

次の結果が表示されます-

Qunit-quick-guide

QUnit-概要

QUnitとは何ですか？

QUnitの機能

ユニットテストケースとは何ですか？

QUnit-環境設定

ローカルインストール

例

CDNベースのバージョン

例

QUnit-基本的な使用法

qunit.jsをインポートする

qunit.cssをインポートする

フィクスチャを追加

テストする関数を作成する

テストケースを作成する

テストを実行する

出力を確認する

QUnit-API

QUnitの重要なAPI

カテゴリ：アサート

カテゴリ：非同期制御

カテゴリ：コールバック

カテゴリ：構成とユーティリティ

カテゴリ：テスト

QUnit-アサーションの使用

出力を確認する

QUnit-実行手順

出力を確認する

QUnit-テストをスキップ

出力を確認する

QUnit-テストのみ

出力を確認する

QUnit-非同期呼び出し

出力を確認する

QUnit-アサーションを期待する

出力を確認する

QUnit-コールバック

出力を確認する

QUnit-ネストされたモジュール

出力を確認する