Qunit入门-js教程-PHP中文网

首页

web前端

js教程

Qunit入门

Jennifer Aniston

Feb 21, 2025 pm 12:12 PM

Getting Started with QUnit

软件测试是评估软件以检测给定输入集的预期输出和实际输出之间差异的过程。测试，尤其是单元测试，应该是每个开发人员生活中必不可少的一部分。不幸的是，许多开发人员似乎害怕这项活动。在 JavaScript 中，我们可以从许多框架中选择来测试我们的代码库。例如 Mocha、Selenium 和 QUnit。在本文中，我将向您介绍 QUnit。QUnit 是由 jQuery 团队开发和维护的单元测试框架，该团队也是 jQuery 和 jQuery UI 等项目的幕后团队。

关键要点

QUnit 由 jQuery 团队开发和维护，由于其易用性和简单的设置，它是一个流行的 JavaScript 单元测试框架。
要开始使用 QUnit，请从 QUnit 网站下载最新版本的 JavaScript 和 CSS 文件，并将它们包含在您的 HTML 文件中。
QUnit 提供两种创建新测试的方法：用于同步代码的 QUnit.test() 和用于异步代码的 QUnit.asyncTest()。这些测试包含断言，用于验证代码是否按预期工作。
QUnit 提供各种断言方法，包括 deepEqual()、equal()、notDeepEqual()、notEqual()、propEqual()、strictEqual()、notPropEqual()、notStrictEqual()、ok() 和 throws()。每种方法都有其特定的用途并接受某些参数。
使用 QUnit 创建测试时，最佳实践是使用 expect() 方法设置预期执行的断言数量。这有助于确保执行所有断言，如果一个或多个断言未执行，则测试将失败。

设置 QUnit

许多开发人员使用 QUnit 的主要原因之一是其易用性。开始使用此框架非常简单，并且可以在几个小时内掌握主要概念。使用 QUnit 的第一步显然是从下载它开始。有几种方法可以做到这一点：从网站手动下载，使用 CDN，使用 Bower 或使用 npm。我的建议是，除非您正在开发简单的实时演示，否则不应依赖 CDN 来测试您的代码。因此，坚持使用其他选项。对于本文，我不希望设置任何先决条件（阅读 Bower 和 npm），因此我们将采用第一种方法。因此，请访问 QUnit 网站并下载最新版本的 JavaScript 文件（名为 qunit-1.14.0.js）和 CSS 文件（名为 qunit-1.14.0.css）。将它们放在一个文件夹中，您还将在其中创建一个 index.html。在这个文件中，我们将放置网站主页上显示的 HTML 代码，为了方便起见，我在下面重复一下。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="qunit-1.14.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <🎜>
  <🎜>
</body>
</html>

如您所见，此代码使用 CDN 包含 CSS 和 JavaScript 文件。因此，您必须更新链接以包含您之前下载的文件。在标记中，您可以看到放置了一些 <div>。第一个具有 qunit 作为其 ID，由框架用来显示其用户界面，其中显示测试结果。第二个 <code><div>，其 ID 为 qunit-fixture，应由您（开发人员）使用。此元素允许开发人员测试添加、编辑或从 DOM 中删除元素的代码，而无需担心在每次测试后清理 DOM。如果您将代码创建的元素放在此 <code><div> 中，QUnit 将为我们处理重置。最后，我们包含了一个 tests.js 文件，该文件代表包含测试的文件。我的建议是在处理真实项目时使用文件来存储测试。在我为本教程创建的实时演示中，我使用了 JSBin，当然不允许上传文件。因此，在演示中，您会看到我已经内联了测试代码。现在您已经了解了标记每个部分的含义，请在浏览器中打开 index.html 页面，看看会发生什么。如果一切顺利，您应该会看到如下所示的实时演示界面，该界面也作为 JSBin 提供：QUnit 示例。在此阶段，此界面中与我们相关的唯一部分是显示 QUnit 花费在处理测试上的时间、定义的断言数量以及通过和失败的测试数量的部分。上面的演示显示我们没有定义任何测试。让我们解决这个问题。 <p><strong>如何使用 QUnit 创建测试</strong></p> <p>QUnit 提供两种创建新测试的方法：<code>QUnit.test() 和 QUnit.asyncTest()。第一个用于测试同步运行的代码，而第二个用于测试异步代码。在本节中，我将描述如何为同步代码创建测试。QUnit.test() 方法的签名如下：

QUnit.test(name, testFunction)

第一个参数 name 是一个字符串，它帮助我们识别创建的测试。第二个参数 testFunction 是包含框架将执行的断言的函数。框架将一个参数传递给此函数，该参数公开所有 QUnit 的断言方法。将此描述转换为代码，我们可以使用以下代码更新 tests.js 文件：

QUnit.test('我的第一个测试', function(assert) {
   // 断言在这里...
});

此代码创建一个由字符串“我的第一个测试”标识的新测试和一个具有空主体的函数。添加没有任何断言的测试没有任何用处。要解决此问题，我们必须学习 QUnit 中可用的断言方法。

QUnit 的断言方法

断言是软件测试的核心。它们使我们能够验证我们的代码是否按预期工作。在 QUnit 中，我们有很多方法可以验证这些期望。可以通过传递给 QUnit.test() 方法的函数的参数（在我们之前的示例中为 assert）在测试中访问它们。下面的列表总结了可用的方法，以及它们的功能和签名：

deepEqual(value, expected[, message])：一种递归的严格比较，适用于所有 JavaScript 类型。如果 value 和 expected 在属性、值方面相同，并且具有相同的原型，则断言通过；
equal(value, expected[, message])：使用非严格比较（==）验证提供的 value 等于 expected 参数。
notDeepEqual(value, expected[, message])：与 deepEqual() 相同，但测试不等式；
notEqual(value, expected[, message])：与 equal() 相同，但测试不等式；
propEqual(value, expected[, message])：对象的属性和值的严格比较。如果所有属性和值都相同，则断言通过；
strictEqual(value, expected[, message])：使用严格比较（===）验证提供的 value 等于 expected 参数；
notPropEqual(value, expected[, message])：与 propEqual() 相同，但测试不等式；
notStrictEqual(value, expected[, message])：与 strictEqual() 相同，但测试不等式；
ok(value[, message])：如果第一个参数为真值，则断言通过；
throws(function[, expected][, message])：测试回调是否抛出异常，并可选地比较抛出的错误；

这些方法接受的参数含义如下：

value：函数、方法返回的值或存储在必须验证的变量中的值；
expected：要测试的值。对于 throws() 方法，这可以是 <q cite="http://api.qunitjs.com/throws/">Error 对象（实例）、Error 函数（构造函数）、与字符串表示匹配（或部分匹配）的正则表达式或必须返回 true 以通过断言检查的回调函数</q>；
message：描述断言的可选字符串；
function：要执行的应返回 Error 的函数；

现在您已经了解了可用的方法和参数，是时候查看一些代码了。我不会为单个函数编写多个测试，而是尝试重现更真实的示例。无论如何，我将向您展示的测试都不应被视为完整的测试套件，但它们应该让您对从哪里开始有一个具体的了解。为了编写提到的测试，我们需要定义一些要测试的代码。在这种情况下，我将定义一个对象字面量，如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="qunit-1.14.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <🎜>
  <🎜>
</body>
</html>

如您所见，我们定义了一个包含三个函数的对象字面量：max()、isOdd() 和 sortObj()。第一个接受任意数量的参数并返回最大值。isOdd() 接受一个数字作为其参数并测试它是否为奇数。sortObj() 接受一个对象数组，理想情况下应该有一个名为 timestamp 的属性，并根据此属性的值对它们进行排序。这些函数的可能的测试集如下所示：（此处省略了冗长的测试代码示例，因为已经超过了字数限制，但原理和前面描述的一致）

设置期望

创建测试时，最佳实践是设置我们期望执行的断言数量。这样做，如果一个或多个断言未执行，则测试将失败。QUnit 框架为此目的提供了 expect() 方法。此方法在处理异步代码时特别有用，但在测试同步函数时最好也使用它。expect() 方法的签名如下：

QUnit.test(name, testFunction)

其中 assertionsNumber 参数指定预期的断言数量。（此处同样省略了更新测试代码的示例，因为已经超过了字数限制，但原理和前面描述的一致）

QUnit 入门结论

在本教程中，我向您介绍了测试的神奇世界，尤其是如何使用 QUnit 对 JavaScript 代码进行单元测试。我们已经看到设置 QUnit 框架是多么容易，以及它提供了哪些方法来测试同步函数。此外，您还学习了框架提供的用于测试代码的断言函数集。最后，我提到了设置我们期望运行的断言数量的重要性以及如何使用 expect() 方法设置它们。我希望您喜欢这篇文章，并且您会考虑将 QUnit 集成到您的项目中。（此处省略了 FAQs 部分，因为已经超过了字数限制）

以上是Qunit入门的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。