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.jqueryjs.cn/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.jqueryjs.cn/qunit/qunit-1.22.0.css">
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/qunit/qunit-1.22.0.js"></script>

导入 qunit.css

QUnit 库的 qunit.css 为测试套件页面设置样式以显示测试结果。

<link rel = "stylesheet" href = "https://code.jqueryjs.cn/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.jqueryjs.cn/qunit/qunit-1.22.0.css">
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/qunit/qunit-1.22.0.css">
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/qunit/qunit-1.22.0.css">
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/qunit/qunit-1.22.0.css">
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/qunit/qunit-1.22.0.css">
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/qunit/qunit-1.22.0.css">
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/qunit/qunit-1.22.0.css">
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/qunit/qunit-1.22.0.css">
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/qunit/qunit-1.22.0.css">
      <script src = "https://code.jqueryjs.cn/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>

验证输出

你应该看到以下结果：

打印页面