现在，我们将通过一个基本示例向您展示如何逐步启动QUnit的过程。

导入qunit.js

Qunit库的qunit.js代表测试运行器和测试框架。

导入qunit.css

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

添加灯具

添加两个id为“ qunit”和“ qunit-fixture”的div元素。这些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." );
});

运行测试

现在让我们看一下完整的代码。

在浏览器中加载页面。页面加载后，测试运行程序调用QUnit.test()并将测试添加到队列中。测试用例的执行由测试运行者推迟并控制。

验证输出

您应该看到以下结果-

• 标头-测试套件标头显示页面标题，通过所有测试时显示绿色条。否则，如果至少一项测试失败，则为红色栏；带有三个复选框的过滤器，用于过滤测试结果；带有navigator.userAgent文本的蓝色栏，用于显示浏览器详细信息。

• 隐藏通过的测试复选框-隐藏通过的测试用例并仅显示失败的测试用例。

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

• 没有try-catch复选框-要在try-catch块之外运行测试用例，以便在测试引发异常的情况下，testrunner将死亡并显示本机异常。

• 摘要-显示运行测试用例的总时间。总测试用例运行且断言失败。

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