JavaScript 单元测试框架 QUnit 详解：从入门到实践

QUnit 框架概述

一、什么是 QUnit

QUnit（http://qunitjs.com/） 是一个功能强大的 JavaScript 单元测试框架，旨在辅助开发者进行代码调试。该框架由 jQuery 团队成员开发，并作为 jQuery 的官方测试套件。尽管 QUnit 专为 JavaScript 设计，但它同样适用于测试任何常规 JavaScript 代码，甚至可以通过 Rhino 或 V8 等 JavaScript 引擎在服务器端运行测试。

在计算机编程领域，单元测试（亦称模块测试）是对软件设计中最小单位——程序模块的正确性进行验证的测试工作。程序单元被视为应用中最小的可测试部分。在过程式编程中，单元通常指单个程序、函数或过程；而在面向对象编程中，最小单元则是方法，涵盖基类（超类）、抽象类或派生类（子类）中的方法。——摘自维基百科。

简而言之，单元测试要求为代码的每个功能编写测试用例。如果所有测试均通过，则可以确信代码没有缺陷（当然，这取决于测试的覆盖率和彻底性）。

单元测试的必要性与回归测试

二、为什么你要测试你的代码

如果你从未编写过单元测试，可能习惯于直接将代码部署到网站，通过手动点击操作来检查是否存在问题，并尝试修复发现的问题。这种方法存在诸多弊端。首先，这种方式非常繁琐。手动点击并非轻松的工作，因为你需要确保所有功能都被测试到，而且极有可能遗漏某些环节。

其次，手动测试的过程无法复用，导致回归测试变得困难。什么是回归？假设你编写了一些代码并进行了测试，修复了所有发现的缺陷后发布。此时，用户反馈了新缺陷，并要求添加新功能。你回到代码中修复新缺陷并增加功能，接下来可能发生的是旧缺陷重新出现，这就是“回归”。现在你不得不重新进行手动点击测试，而且可能无法找到这些旧缺陷；即使找到了，也需要花费大量时间来确定问题是否由回归引起。使用单元测试，你可以编写测试来发现缺陷，一旦代码被修改，通过测试再次筛选。如果出现回归，某些测试必然会失败，你可以轻松识别它们并知道哪部分代码包含错误。既然你知道自己刚才修改了什么，就可以很容易地解决这些问题。

单元测试的另一个优点，特别是对于 Web 开发而言：它使跨浏览器兼容性测试变得简单。只需在不同浏览器中运行你的测试案例即可。如果一个浏览器出现问题，你修复它并重新运行测试案例，确保不会在其他浏览器中引起回归。一旦所有测试通过，你可以肯定所有目标浏览器都支持该功能。

我想提及 John Resig 的一个项目：TestSwarm（http://testswarm.com/）。它将 JavaScript 单元测试提升到了一个新的层次，通过分布式方式实现。这是一个包含大量测试案例的网站，任何人都可以去那里运行一些测试案例，然后结果会返回到服务器。通过这种方式，代码可以在不同的浏览器甚至不同的平台上非常快速地进行测试。

三、如何用 QUnit 写单元测试

QUnit 测试环境配置

那么，你如何正确地用 QUnit 编写单元测试呢？首先，你需要设置一个测试环境：

<!DOCTYPE html>
<html>
<head>
<title>QUnit Test Suite</title>
<link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
<!-- Your project file goes here -->
<script type="text/javascript" src="myProject.js"></script>
<!-- Your tests file goes here -->
<script type="text/javascript" src="myTests.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>

正如你所见，这里使用了一个托管的 QUnit 框架版本。

将要被测试的代码已添加到 myProject.js 中，而你的测试应插入到 myTest.js 中。要运行这些测试，只需在一个浏览器中打开这个 HTML 文件。现在到了编写测试的时间了。

编写断言与测试用例

单元测试的基石是断言：

断言是一个命题，预测你的代码的返回结果。如果预测为假，断言失败，你就知道出了问题。

运行断言，你应该把它们放入测试案例：

// Let's test this function
function isEven(val) {
return val % 2 === 0;
}
test('isEven()', function() {
 ok(isEven(0), 'Zero is an even number');
 ok(isEven(2), 'So is two');
 ok(isEven(-4), 'So is negative four');
 ok(!isEven(1), 'One is not an even number');
 ok(!isEven(-7), 'Neither is negative seven');
})

这里我们定义了一个函数：isEven，用来检测一个数字是否为偶数，并且我们希望测试这个函数来确认它不会返回错误答案。我们首先调用 test()，它构建了一个测试案例；第一个参数是一个将在结果中显示的字符串，第二个参数是包括我们断言的一个回调函数。我们写了 5 个断言，所有的都是布尔型的。一个布尔型的断言，期望它的第一个参数为 true。第二个参数依然是要在结果中显示的消息。这里是你想要得到的，只要你运行测试：

四、深入学习参考

以上只简单的介绍了 qunit.js ，其断言方法还有很多，具体可参考 api 文档： http://api.qunitjs.com/ 单元测试是一个在你发布你的代码前测试你的代码的非常好的方法。如果你以前没有写过任何的单元测试，现在是时候开始了！