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

如何使用 QUnit 创建测试

QUnit 提供两种创建新测试的方法：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

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7888

Java教程

1650

CakePHP 教程

1411

Laravel 教程

1302

PHP教程

1248

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。