JavaScript 什么是Qunit

介绍： Qunit是一个JavaScript测试框架，用于检查JavaScript代码。它主要用于JQuery项目。开发人员可以使用QUnit来测试他们的JavaScript代码库。

它主要遵循CommonJS单元测试规范，该规范的目标是使JavaScript在网页浏览器之外使用，即使JS模块化并可以在各种平台应用中使用。

测试： 测试是审查应用程序功能以确定其是否符合要求，并确保在开发人员级别使用了单元测试的过程。

此外，测试任何单独的类或方法的过程被称为 单元测试 ，因为它需要开发可扩展的产品。此外，可以以多种方式执行此单元测试，即手动执行测试用例而不使用任何工具支持的过程称为 手动测试 ，或者使用自动化工具进行测试用例的执行被称为 自动化测试 。

现在，既然我们熟悉了QUnit的基本知识和其作用，让我们继续学习如何使用它和如何设置它。

如何安装/使用QUnit？

我们可以通过 NodeJS （将其本地安装在机器上）或通过 CDN （直接在浏览器中）来使用它。

QUnit的官方发布包如下：

npm

npm install --save-dev qunit

yarn

yarn add --dev qunit

bower

bower install --save-dev qunit

示例： 现在，为了演示测试，我们将使用CDN以方便访问。，我们将执行一个基本的测试格式来了解QUnit测试背后的核心问题。在这里，我们使用了一个简单的函数 messageHandler ，它将打印一个字符串和一个数字，并且一个 测试用例 将断言其输出以检查其正确性。

注意： 由于我们使用CDN，在你的IDE中创建一个文件夹并在其中打开一个空文件。

index.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>QUnit | GeeksForGeeks</title> 
  
    <!-- The CDN Links for QUnit (IMPORTANT: Only use  
        these CDN links if you are testing without  
        using node.js/dependencies) -->
    <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> 
  
    <!-- QUnit Frontend Toolbar (Fixture) -->
    <div id="qunit"></div> 
    <div id="qunit-fixture"></div> 
  
    <!-- Testing Script -->
    <script> 
          
        // Function which we will test (Unit Testing) 
        // Returns a message + a number 
        function messageHandler(message, x) { 
            const result = (message + " " + x).toString(); 
            return result; 
        } 
  
        // Testcase to assert result 
        QUnit.test("Testing Message Function", function(assert) { 
            var value = messageHandler("GeeksForGeeks", 10); 
            assert.equal( 
                value, 
                "GeeksForGeeks 10", 
                "Result should be GeeksForGeeks 10." 
            ); 
        }); 
    </script> 
</body> 
  
</html>

输出:

JavaScript 什么是Qunit

解释: 正如输入与所需输出匹配，TestCase成功通过。当页面加载时，测试运行器调用 QUnit.test() 并将测试添加到队列中。测试用例的执行被延迟并由测试运行器控制。

让我们看一下如果测试用例 失败： 会发生什么。

JavaScript 什么是Qunit

解释: 这次我们传递了整数1000而不是10，导致测试用例失败，错误输出显示了这一点，这使得我们更容易调试代码。

现在让我们看看上述测试过程的功能：

设置 index.html: 为了查看测试输出，我们必须使用两个预定义的 QUnit ID，这将帮助在网页上的目标 div 中呈现输出。

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

测试函数: 现在，我们定义了要测试其输出的函数，如下所示 messageHandler(message, x)。 它接受一个字符串文本和一个整数，并将它们连接起来。这些函数是我们进行单元测试的对象。
测试用例断言:

QUnit.test("Test", function(assert) {
//
});

这是我们使用 QUnit 的预定义模块，用于断言测试函数的输出是否等于断言的值。相同的结果将呈现在网页上的输出 div 中。此外，这也是可以根据对代码测试要求的需要实施任何广泛的测试模块和函数的地方。

QUnit 的主要特点:
- 它是一个用于测试 JS 代码的开源框架。
- 它包括测试夹具以运行测试，以及一个明确的问题列表。
- QUnit 还通过提供断言来帮助测试预期结果。
- 方便调试代码。
QUnit 提供的一些重要的 API:

类别	函数
异步控制	用于处理需要一些时间来执行的异步操作的方法
回调	提供用于读取结果的方法
配置	提供自定义断言和实用工具函数
断言	提供断言方法
测试	用于测试代码的方法