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">

添加夹具

添加两个id = "qunit"和"qunit-fixture"的 div 元素。这些 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。例如，要直接调整运行时Behave，通过自定义断言扩展 QUnit API 等。
5	测试	用于测试操作。

类别：断言

它提供了一组断言方法。

先生。	方法与说明
1	异步（）指示 QUnit 等待异步操作。
2	深等于() 深度递归比较，适用于基本类型、数组、对象、正则表达式、日期和函数。
3	平等的（）非严格比较，大致相当于JUnit的assertEquals。
4	预计（）指定预计在测试中运行多少个断言。
5	notDeepEqual() 反向深度递归比较，适用于基本类型、数组、对象、正则表达式、日期和函数。
6	不等于() 非严格比较，检查不平等。
7	不好（）布尔检查，ok() 和 CommonJS 的 assert.ok() 的反函数，相当于 JUnit 的assertFalse()。如果第一个参数为 false，则通过。
8	notPropEqual() 严格比较对象自身的属性，检查是否不平等。
9	不严格等于() 严格比较，检查不平等。
10	好的（）布尔检查，相当于CommonJS的assert.ok()和JUnit的assertTrue()。如果第一个参数为 true，则通过。
11	propEqual() 对象自身属性的严格类型和值比较。
12	推（）报告自定义断言的结果。
13	严格等于() 严格的类型和值比较。
14	抛出() 测试回调是否引发异常，并可以选择比较引发的错误。

类别：异步控制

它提供了一组异步操作。

先生。	方法与说明
1	异步（）指示 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。例如，要直接调整运行时Behave，通过自定义断言扩展 QUnit API 等。

先生。	方法与说明
1	QUnit.断言 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.断言 QUnit 断言的命名空间。
2	QUnit.asyncTest() 已弃用：添加要运行的异步测试。测试必须包括对 QUnit.start() 的调用。
3	QUnit.module() 将相关测试分组到一个标签下。
4	QUnit.only() 添加一个以独占方式运行的测试，阻止所有其他测试运行。
5	QUnit.skip() 添加要跳过的类似测试的对象。
6	QUnit.test() 添加要运行的测试。

QUnit - 使用断言

所有断言都在断言类别中。

该类别提供了一组对于编写测试有用的断言方法。仅记录失败的断言。

先生。	方法与说明
1	异步（）指示 QUnit 等待异步操作。
2	深等于() 深度递归比较，适用于基本类型、数组、对象、正则表达式、日期和函数。
3	平等的（）非严格比较，大致相当于JUnit的assertEquals。
4	预计（）指定预计在测试中运行多少个断言。
5	notDeepEqual() 反向深度递归比较，适用于基本类型、数组、对象、正则表达式、日期和函数。
6	不等于() 非严格比较，检查不平等。
7	不好（）布尔检查，ok() 和 CommonJS 的 assert.ok() 的反函数，相当于 JUnit 的assertFalse()。如果第一个参数为 false，则通过。
8	notPropEqual() 严格比较对象自身的属性，检查是否不平等。
9	不严格等于() 严格比较，检查不平等。
10	好的（）布尔检查，相当于CommonJS的assert.ok()和JUnit的assertTrue()。如果第一个参数为 true，则通过。
11	propEqual() 对象自身属性的严格类型和值比较。
12	推（）报告自定义断言的结果。
13	严格等于() 严格的类型和值比较。
14	抛出() 测试回调是否引发异常，并可以选择比较引发的错误。

让我们尝试在示例中介绍大多数上述方法。

现场演示

<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 方法，则仅执行第一个方法。让我们只看看实际操作的方法。

现场演示

<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（后进先出）模式堆栈到父挂钩。您可以使用参数和挂钩指定每次测试之前和之后运行的代码。

挂钩还可以用于创建将在每个测试的上下文中共享的属性。hooks 对象上的任何其他属性都将添加到该上下文中。如果您使用回调参数调用 QUnit.module，则 hooks 参数是可选的。

将上下文作为测试环境来调用模块的回调，并将环境的属性复制到模块的测试、挂钩和嵌套模块。

现场演示

<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>

验证输出

您应该看到以下结果 -