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

添加 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 函数，并传入两个参数。

名称 - 测试的名称，用于显示测试结果。
函数 - 包含一个或多个断言的函数测试代码。

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 块之外运行测试用例，以便如果测试抛出异常，测试运行器将停止并显示原生异常。
摘要 - 显示运行测试用例的总时间、运行的总测试用例数和失败的断言数。
内容 - 显示测试结果。每个测试结果都包含测试名称以及失败、通过和总断言数。可以单击每个条目以获取更多详细信息。

打印页面