HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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。

示例

您可以按如下方式将 qunit-git.js 和 qunit-git.css 文件包含到 HTML 文件中 −

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

添加 Fixture

添加两个 div 元素，其中 id = "qunit" 和 "qunit-fixture"。这些 div 元素是必需的，并为测试提供 Fixture。

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

创建要测试的函数

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

创建测试用例

调用 QUnit.test 函数，使用两个参数。

  • Name − 显示测试结果的测试名称。

  • Function − 函数测试代码，具有一个或多个断言。

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() 并将测试添加到队列中。测试用例的执行被推迟并由测试运行器控制。

验证输出

你已经看到以下结果 −

  • Header − 测试套件标题显示页面标题，所有测试通过后显示绿色条。否则，当至少有一个测试失败时，会出现一个红色条，一个带有三个复选框的条用于过滤测试结果，以及一个带有 navigator.userAgent 文本的蓝色条用于显示浏览器详细信息。

  • 隐藏已通过的测试复选框 − 隐藏已通过的测试用例并仅展示失败的测试用例。

  • 检查全局复选框 − 显示每个测试之前和之后窗口对象上的所有属性列表，然后检查差异。对属性的修改将导致测试失败。

  • 无 try-catch 复选框 − 在 try-catch 块之外运行测试用例，以便在测试抛出异常的情况下，测试运行器将终止并显示本机异常。

  • 摘要 − 显示运行测试用例所需的总时间。运行的测试用例总数和失败的断言总数。

  • 内容 − 显示测试结果。每个测试结果都有测试名称，后面跟着失败、通过和总断言。可以单击每个条目以获取更多详细信息。

QUnit - API

QUnit 的重要 API

QUnit 的一些重要类别是 −

Sr.No. 类别 功能
1 Assert(断言) 一组断言方法。
2 Async Control(异步控制) 用于异步操作。
3 Callbacks(回调) 将 QUnit 集成到其他工具(例如 CI 服务器)时，这些回调可用作读取测试结果的 API。
4 Configuration and Utilities(配置和实用程序) 这些方法和属性用作实用程序助手并用于配置 QUnit。例如，要直接调整运行时行为，通过自定义断言等扩展 QUnit API。
5 Test(测试) 用于测试操作。

类别:Assert(断言)

它提供了一组断言方法。

Sr.No. 方法 &描述
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()。如果第一个参数为真，则通过。
11

propEqual()

对象自身属性的严格类型和值比较。
12

push()

报告自定义断言的结果。
13

strictEqual()

严格的类型和值比较。
14

throws()

测试回调是否抛出异常，并可选择比较抛出的错误。

类别:Async Control(异步控制)

它提供了一组异步操作。

Sr.No. 方法和描述
1

async()

指示 QUnit 等待异步操作。
2

QUnit.asyncTest()

已弃用:添加要运行的异步测试。测试必须包含对 QUnit.start() 的调用。
3

QUnit.start()

部分弃用:在测试运行器停止后再次开始运行测试。请参阅 QUnit.stop() 和 QUnit.config.autostart。
4

QUnit.stop()

已弃用:增加测试运行器在继续之前应等待的 QUnit.start() 调用次数。
5

QUnit.test()

添加要运行的测试。

类别:Callbacks(回调)

将 QUnit 集成到 CI 服务器等其他工具时，这些回调可用作读取测试结果的 API。

序号 方法与描述
1

QUnit.begin()

注册一个回调，在测试套件开始时触发。
2

QUnit.done()

注册一个回调，在测试套件结束时触发。
3

QUnit.log()

注册一个回调，在断言完成时触发。
4

QUnit.moduleDone()

注册一个每当模块结束时触发回调。
5

QUnit.moduleStart()

注册一个回调，每当模块开始时触发。
6

QUnit.testDone()

注册一个回调，每当测试结束时触发。
7

QUnit.testStart()

注册一个回调，每当测试开始时触发。

类别:Configuration and Utilities(配置和实用程序)

这些方法和属性用作实用程序帮助程序并配置 QUnit。例如，直接调整运行时行为、通过自定义断言扩展 QUnit API 等。

Sr.No. 方法和说明
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()

返回表示堆栈跟踪的单行字符串(调用堆栈)。

类别:Test(测试)

它提供了一组测试操作。

Sr.No. 方法和说明
1

QUnit.assert

QUnit 断言的命名空间。
2

QUnit.asyncTest()

已弃用:添加要运行的异步测试。测试必须包含对 QUnit.start() 的调用。
3

QUnit.module()

将相关测试分组到单个标签下。
4

QUnit.only()

添加一个测试以专门运行，阻止所有其他测试运行。
5

QUnit.skip()

添加要跳过的测试类对象。
6

QUnit.test()

添加要运行的测试。

QUnit - 使用断言

所有断言都位于断言类别中。

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

Sr.No. 方法和描述
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()。如果第一个参数为真，则通过。
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"];

            //检查两个对象是否相等
            assert.equal(str1, str2, "Strings passed are equal.");
			
            //检查两个对象不相等
            assert.notEqual(str1,str3, "Strings passed are not equal.");

            //检查条件是否为真
            assert.ok(val1 < val2, val1 + " is less than " + val2);
			
            //检查条件是否为假
            assert.notOk(val1 > val2, val2 + " is not less than " + val1);

            //检查两个数组是否相等。
            assert.deepEqual(expectedArray, resultArray ,"Arrays passed are equal.");
			
            //检查两个数组是否相等。
            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 - only 测试

有时我们的代码尚未准备好，如果运行用于测试该方法/代码的测试用例，则会失败。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()，它返回一个"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>
         //注册一个回调，每当测试套件启动时触发。
         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;
         });

         //注册一个回调，当测试套件结束时触发。		 
         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;
         });
		 
         //注册一个回调，每当模块启动时触发。
            QUnit.moduleStart(function( details ) {
               var data = document.getElementById("console").innerHTML;
               document.getElementById("console").innerHTML = data + "<br/><br/>" + 
                  "QUnit.moduleStart - Module Begins " +  "<br/>" + details.name;
         });
		 
         //注册一个回调，当模块结束时触发。
         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 ;
         });
		 
         //注册一个回调，每当测试开始时就会触发。
         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;
         });
		 
         //注册一个回调，当测试结束时触发。
         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，则 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 ) {
               // 这将在父模块的 beforeEach 钩子之后运行
               hooks.beforeEach( function( assert ) {
                  assert.ok( true, "nested beforeEach called" );
               });

               // 这将在父模块的 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>

验证输出

您应该看到以下结果 −

❮ 上一节 下一节 ❯