QUnit 快速指南

上一頁
下一頁

QUnit - 概述

測試是檢查應用程式功能是否按要求工作的過程，以確保在開發人員級別進行單元測試。單元測試是對單個實體（類或方法）的測試。單元測試對於每個軟體組織向客戶提供高質量產品至關重要。

單元測試可以透過下表中提到的兩種方式進行。

手動測試 自動化測試
在沒有任何工具支援的情況下手動執行測試用例稱為手動測試。 藉助工具支援並使用自動化工具執行測試用例稱為自動化測試。
費時費力。由於測試用例由人力資源執行，因此速度非常慢且繁瑣。 快速自動化。執行測試用例的速度比人力資源快得多。
人力資源投入巨大。由於需要手動執行測試用例，因此需要更多測試人員。 人力資源投入較少。測試用例使用自動化工具執行，因此需要的測試人員較少。
可靠性較低，因為由於人為錯誤，測試可能無法每次都精確執行。 可靠性更高。自動化測試每次執行時都執行相同的操作。
不可程式設計。無法進行程式設計來編寫複雜的測試，這些測試可以獲取隱藏的資訊。 可程式設計。測試人員可以編寫複雜的測試程式來獲取隱藏資訊。

什麼是 QUnit？

QUnit 是一個用於 JavaScript 程式語言的單元測試框架。它在測試驅動開發中很重要，並被 jQuery、jQuery UI 和 jQuery Mobile 專案使用。QUnit 能夠測試任何通用的 JavaScript 程式碼庫。

QUnit 推崇“先測試後編碼”的理念，強調為一段程式碼設定測試資料，可以先測試然後實現。這種方法就像“少量測試，少量編碼，少量測試，少量編碼……”，這可以提高程式設計師的生產力以及程式程式碼的穩定性，減少程式設計師的壓力和除錯時間。

QUnit 的特點

QUnit 是一個用於編寫和執行測試的開源框架。以下是其最突出的特點：

  • QUnit 提供斷言來測試預期結果。

  • QUnit 提供測試夾具來執行測試。

  • QUnit 測試允許更快地編寫程式碼，從而提高質量。

  • QUnit 簡潔優雅。它不太複雜，所需時間較少。

  • QUnit 測試可以自動執行，它們檢查自己的結果並提供即時反饋。無需手動檢查測試結果報告。

  • QUnit 測試可以組織成包含測試用例甚至其他測試套件的測試套件。

  • QUnit 在進度條中顯示測試進度，如果測試進行順利，則為綠色，如果測試失敗，則變為紅色。

什麼是單元測試用例？

單元測試用例是程式碼的一部分，它確保程式碼的另一部分（方法）按預期工作。為了快速獲得所需的結果，需要測試框架。QUnit 是 JavaScript 程式語言的完美單元測試框架。

正式編寫的單元測試用例的特點是已知的輸入和預期的輸出，在執行測試之前就已確定。已知輸入應測試前提條件，預期輸出應測試後置條件。

每個需求至少必須有兩個單元測試用例：一個正測試和一個負測試。如果一個需求有子需求，則每個子需求必須至少有兩個測試用例作為正測試和負測試。

QUnit - 環境設定

有兩種使用 QUnit 的方法。

  • 本地安裝 - 你可以將 QUnit 庫下載到本地機器上，並將其包含在你的 HTML 程式碼中。

  • 基於 CDN 的版本 - 你可以直接從內容分發網路 (CDN) 將 QUnit 庫包含到你的 HTML 程式碼中。

本地安裝

  • 訪問 https://code.jquery.com/qunit/ 下載最新的可用版本。

  • 將下載的 qunit-git.js 和 qunit-git.css 檔案放在你網站的目錄中，例如 /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) 將 QUnit 庫包含到你的 HTML 程式碼中。

在本教程中，我們始終使用 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">

新增測試夾具

新增兩個 div 元素，其 id = "qunit" 和 "qunit-fixture"。這些 div 元素是必需的，併為測試提供測試夾具。

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

建立要測試的函式

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

建立測試用例

呼叫 QUnit.test 函式，並傳入兩個引數。

  • 名稱 - 要顯示測試結果的測試名稱。

  • 函式 - 測試程式碼函式，包含一個或多個斷言。

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() 並將測試新增到佇列中。測試用例的執行被延遲並由測試執行器控制。

驗證輸出

你應該看到以下結果：

  • 標題 - 測試套件標題顯示頁面標題，如果所有測試都透過則顯示綠色條，否則如果至少有一個測試失敗則顯示紅色條，帶三個複選框的條用於過濾測試結果，以及顯示瀏覽器詳細資訊的帶有 navigator.userAgent 文字的藍色條。

  • 隱藏已透過測試複選框 - 隱藏已透過的測試用例，僅顯示失敗的測試用例。

  • 檢查全域性變數複選框 - 在每次測試之前和之後顯示視窗物件上的所有屬性列表，然後檢查差異。對屬性的修改將導致測試失敗。

  • 無 try-catch 複選框 - 在 try-catch 塊之外執行測試用例，以便如果測試丟擲異常，測試執行器將終止並顯示原生異常。

  • 摘要 - 顯示執行測試用例的總時間。執行的測試用例總數和失敗的斷言數。

  • 內容 - 顯示測試結果。每個測試結果都有測試名稱，後跟失敗的、透過的和總的斷言數。可以單擊每個條目以獲取更多詳細資訊。

QUnit - API

QUnit 的重要 API

QUnit 的一些重要類別是：

序號 類別 功能
1 斷言 一組斷言方法。
2 非同步控制 用於非同步操作。
3 回撥函式 在將 QUnit 整合到其他工具（例如 CI 伺服器）時，這些回撥函式可以用作 API 來讀取測試結果。
4 配置和實用程式 這些方法和屬性用作實用程式幫助器並配置 QUnit。例如，直接調整執行時行為，透過自定義斷言擴充套件 QUnit API 等。
5 測試 用於測試操作。

類別：斷言

它提供了一組斷言方法。

序號 方法和說明
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()

測試回撥函式是否丟擲異常，並可以選擇比較丟擲的錯誤。

類別：非同步控制

它提供了一組非同步操作。

序號 方法和說明
1

async()

指示 QUnit 等待非同步操作。
2

QUnit.asyncTest()

已棄用：新增要執行的非同步測試。測試必須包含對 QUnit.start() 的呼叫。
3

QUnit.start()

部分棄用：在測試執行器停止後再次開始執行測試。參見 QUnit.stop() 和 QUnit.config.autostart。
4

QUnit.stop()

已棄用：增加測試執行器在繼續之前應等待的 QUnit.start() 呼叫的數量。
5

QUnit.test()

新增要執行的測試。

類別：回撥函式

在將 QUnit 整合到像 CI 伺服器這樣的其他工具時，這些回撥函式可以用作 API 來讀取測試結果。

序號 方法和說明
1

QUnit.begin()

註冊一個回撥函式，每當測試套件開始時觸發。
2

QUnit.done()

註冊一個回撥函式，每當測試套件結束時觸發。
3

QUnit.log()

註冊一個回撥函式，每當斷言完成時觸發。
4

QUnit.moduleDone()

註冊一個回撥函式，每當模組結束時觸發。
5

QUnit.moduleStart()

註冊一個回撥函式，每當模組開始時觸發。
6

QUnit.testDone()

註冊一個回撥函式，每當測試結束時觸發。
7

QUnit.testStart()

註冊一個回撥函式，每當測試開始時觸發。

類別：配置和實用程式

這些方法和屬性用作實用程式幫助器並配置 QUnit。例如，直接調整執行時行為，透過自定義斷言擴充套件 QUnit API 等。

序號 方法和說明
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

QUnit.assert

QUnit 斷言的名稱空間。
2

QUnit.asyncTest()

已棄用：新增要執行的非同步測試。測試必須包含對 QUnit.start() 的呼叫。
3

QUnit.module()

將相關的測試分組在一個標籤下。
4

QUnit.only()

新增一個僅執行的測試，阻止所有其他測試執行。
5

QUnit.skip()

新增一個要跳過的測試物件。
6

QUnit.test()

新增一個要執行的測試。

QUnit - 使用斷言

所有斷言都在斷言類別中。

此類別提供了一套用於編寫測試的有用斷言方法。僅記錄失敗的斷言。

序號 方法和說明
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 在這方面有所幫助。使用 only 方法編寫的測試方法將被執行，而其他測試將不會執行。如果指定了多個 only 方法，則只有第一個方法會執行。讓我們看看 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()，它返回一個“done”函式，應在操作完成後呼叫。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() 函式來檢查測試中進行的斷言數量。在下面的示例中，我們期望在測試中進行三個斷言。

即時演示 
<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（後進先出）模式堆疊到父鉤子中。您可以使用引數和鉤子指定在每個測試之前和之後執行的程式碼。

鉤子還可以用於建立將在每個測試的上下文中共享的屬性。鉤子物件上的任何附加屬性都將新增到該上下文中。如果您使用回撥引數呼叫 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>

驗證輸出

你應該看到以下結果：

列印頁面
上一頁
下一頁
廣告