使用 QUnit 测试 JavaScript 代码：分步指南
- 王林原创
- 2023-09-02 17:09:011008浏览
QUnit 由 jQuery 团队开发，是一个用于对 JavaScript 进行单元测试的出色框架。在本教程中，我将介绍 QUnit 具体是什么，以及为什么您应该关心严格测试您的代码。
什么是 QUnit
QUnit 是一个强大的 JavaScript 单元测试框架，可以帮助您调试代码。它由 jQuery 团队成员编写，是 jQuery 的官方测试套件。但 QUnit 足够通用，可以测试任何常规 JavaScript 代码，甚至可以通过某些 JavaScript 引擎（如 Rhino 或 V8）测试服务器端 JavaScript。
如果您不熟悉“单元测试”的概念，请不要担心。理解起来并不难：
在计算机编程中，单元测试是一种软件验证和确认方法，程序员在其中测试源代码的各个单元是否适合使用。单元是应用程序的最小可测试部分。在过程式编程中，一个单元可以是一个单独的函数或过程。
此内容引自维基百科。简而言之，您为代码的每个功能编写测试，如果所有这些测试都通过了，您可以确定代码将没有错误（主要取决于您的测试的彻底程度）。
为什么应该测试代码
如果您以前没有编写过任何单元测试，您可能只是将代码直接应用到网站上，点击一会儿看看是否出现任何问题，并在发现问题时尝试修复它。这种方法存在很多问题。
首先，这非常乏味。点击实际上并不是一件容易的事，因为你必须确保所有内容都被点击，并且很可能你会错过一两件事。其次，您为测试所做的一切都不可重用，这意味着找到回归并不容易。什么是回归？想象一下，您编写了一些代码并对其进行了测试，修复了发现的所有错误，然后发布了它。然后，用户发送一些有关新错误的反馈，并请求一些新功能。您返回代码，修复这些新错误并添加这些新功能。接下来可能发生的是一些旧的错误再次出现，这被称为“回归”。看，现在你必须再次点击，很可能你就不会再发现这些旧的错误了；即使你这样做了，你也需要一段时间才能发现问题是由回归引起的。通过单元测试，您可以编写测试来查找错误，一旦代码被修改，您可以再次通过测试对其进行过滤。如果出现回归，某些测试肯定会失败，并且您可以轻松发现它们，知道代码的哪一部分包含错误。由于您知道刚刚修改的内容，因此可以轻松修复它。
单元测试的另一个优点尤其适用于 Web 开发：它简化了跨浏览器兼容性的测试。只需在不同的浏览器上运行测试，如果一种浏览器出现问题，您可以修复它并再次运行这些测试，确保它不会在其他浏览器上引入回归。一旦所有目标浏览器都通过测试，您就可以确定它们都受支持。
我想提一下 John Resig 的项目之一：TestSwarm。通过使其分布式，它将 JavaScript 单元测试提升到一个新的水平。这是一个包含许多测试的网站，任何人都可以去那里，运行一些测试，然后将结果返回到服务器。这样，代码就可以非常快速地在不同浏览器甚至不同平台上进行测试。
如何使用 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，并且您的测试应插入 myTests.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()，它构造一个测试用例；第一个参数是将在结果中显示的字符串，第二个参数是包含我们的断言的回调函数。一旦 QUnit 运行，就会调用此回调函数。
我们编写了五个断言，所有断言都是布尔值。布尔断言期望其第一个参数为 true。第二个参数也是一条将在结果中显示的消息。
运行测试后，您将得到以下结果：
由于所有这些断言都已成功通过，我们可以非常确定 isEven() 将按预期工作。
让我们看看如果断言失败会发生什么。
// 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 does negative seven');
// Fails
ok(isEven(3), 'Three is an even number');
})
结果如下：
断言失败是因为我们故意写错了，但在你自己的项目中，如果测试没有通过，并且所有断言都是正确的，你就知道发现了一个bug。
更多断言
ok() 并不是 QUnit 提供的唯一断言。在测试项目时，还有其他类型的断言很有用：
比较断言
比较断言 equals() 期望其第一个参数（即实际值）等于其第二个参数（即期望值）。它与 ok() 类似，但同时输出实际值和期望值，使调试更加容易。与 ok() 一样，它采用可选的第三个参数作为要显示的消息。
所以代替：
test('assertions', function() {
ok( 1 == 1, 'one equals one');
})
你应该写：
test('assertions', function() {
equals( 1, 1, 'one equals one');
})
注意最后一个“1”，这是比较值。
如果值不相等：
test('assertions', function() {
equals( 2, 1, 'one equals one');
})
它提供了更多信息，使生活变得更加轻松。
比较断言使用“==”来比较其参数，因此它不处理数组或对象比较：
test('test', function() {
equals( {}, {}, 'fails, these are different objects');
equals( {a: 1}, {a: 1} , 'fails');
equals( [], [], 'fails, there are different arrays');
equals( [1], [1], 'fails');
})
为了测试这种相等性，QUnit 提供了另一种断言：相同断言。
相同的断言
相同的断言，same()，需要与 equals() 相同的参数，但它是一个深度递归比较断言，不仅适用于基本类型，还适用于数组和对象。在前面的示例中，如果将断言更改为相同的断言，它们将全部通过：
test('test', function() {
same( {}, {}, 'passes, objects have the same content');
same( {a: 1}, {a: 1} , 'passes');
same( [], [], 'passes, arrays have the same content');
same( [1], [1], 'passes');
})
请注意，same() 在可能的情况下使用“===”进行比较，因此在比较特殊值时它会派上用场：
test('test', function() {
equals( 0, false, 'true');
same( 0, false, 'false');
equals( null, undefined, 'true');
same( null, undefined, 'false');
})
构建你的断言
将所有断言放在一个测试用例中是一个非常糟糕的主意，因为它很难维护，并且不会返回干净的结果。您应该做的是构建它们，将它们放入不同的测试用例中，每个测试用例都针对单一功能。
您甚至可以通过调用模块函数将测试用例组织到不同的模块中：
module('Module A');
test('a test', function() {});
test('an another test', function() {});
module('Module B');
test('a test', function() {});
test('an another test', function() {});
异步测试
在前面的示例中，所有断言都是同步调用的，这意味着它们依次运行。在现实世界中，还有很多异步函数，例如ajax调用或setTimeout()和setInterval()调用的函数。我们如何测试这些类型的功能？ QUnit 提供了一种特殊的测试用例，称为“异步测试”，专门用于异步测试：
我们先尝试用常规的方式来写：
test('asynchronous test', function() {
setTimeout(function() {
ok(true);
}, 100)
})
看到了吗？就好像我们没有写任何断言一样。这是因为断言是异步运行的，当它被调用时，测试用例已经完成。
这是正确的版本：
test('asynchronous test', function() {
// Pause the test first
stop();
setTimeout(function() {
ok(true);
// After the assertion has been called,
// continue the test
start();
}, 100)
})
在这里，我们使用 stop() 暂停测试用例，调用断言后，我们使用 start() 继续。
调用 test() 后立即调用 stop() 是很常见的；所以QUnit提供了一个快捷方式：asyncTest()。您可以像这样重写前面的示例：
asyncTest('asynchronous test', function() {
// The test is automatically paused
setTimeout(function() {
ok(true);
// After the assertion has been called,
// continue the test
start();
}, 100)
})
有一点需要注意：setTimeout() 将始终调用其回调函数，但如果它是自定义函数（例如 ajax 调用）怎么办？您如何确定回调函数将被调用？如果不调用回调，则不会调用 start()，整个单元测试将挂起：
所以这就是你要做的：
// A custom function
function ajax(successCallback) {
$.ajax({
url: 'server.php',
success: successCallback
});
}
test('asynchronous test', function() {
// Pause the test, and fail it if start() isn't called after one second
stop(1000);
ajax(function() {
// ...asynchronous assertions
start();
})
})
您将超时传递给 stop()，它告诉 QUnit，“如果在该超时后未调用 start()，则该测试应该失败。”您可以确信整个测试不会挂起，并且如果出现问题您将会收到通知。
多个异步函数怎么样？你把start()放在哪里？你把它放在setTimeout()中：
// A custom function
function ajax(successCallback) {
$.ajax({
url: 'server.php',
success: successCallback
});
}
test('asynchronous test', function() {
// Pause the test
stop();
ajax(function() {
// ...asynchronous assertions
})
ajax(function() {
// ...asynchronous assertions
})
setTimeout(function() {
start();
}, 2000);
})
超时应该足够长，以允许在测试继续之前调用两个回调。但是如果其中一个回调没有被调用怎么办？你怎么知道这一点？这就是expect() 发挥作用的地方：
// A custom function
function ajax(successCallback) {
$.ajax({
url: 'server.php',
success: successCallback
});
}
test('asynchronous test', function() {
// Pause the test
stop();
// Tell QUnit that you expect three assertions to run
expect(3);
ajax(function() {
ok(true);
})
ajax(function() {
ok(true);
ok(true);
})
setTimeout(function() {
start();
}, 2000);
})
你向expect()传递一个数字来告诉QUnit你期望运行X个断言，如果其中一个断言没有被调用，数字将不匹配，并且你会被通知有事情发生错了。
expect() 还有一个快捷方式：只需将数字作为第二个参数传递给 test() 或 asyncTest()：
// A custom function
function ajax(successCallback) {
$.ajax({
url: 'server.php',
success: successCallback
});
}
// Tell QUnit that you expect three assertion to run
test('asynchronous test', 3, function() {
// Pause the test
stop();
ajax(function() {
ok(true);
})
ajax(function() {
ok(true);
ok(true);
})
setTimeout(function() {
start();
}, 2000);
})
结论
这就是开始使用 QUnit 所需了解的全部内容。单元测试是在发布代码之前测试代码的好方法。如果您之前没有编写过任何单元测试，那么现在就开始吧！感谢您的阅读！
- 在 Twitter 上关注我们，或订阅 Nettuts+ RSS Feed 以获取网络上最好的 Web 开发教程。
以上是使用 QUnit 测试 JavaScript 代码：分步指南的详细内容。更多信息请关注PHP中文网其他相关文章！