一、什么是 QUnit
QUnit（http://qunitjs.com/） 是一個非常強大的javascript單元測試框架，可以幫你調(diào)試代碼。它是由 jQuery 團隊的成員寫的，而且是 jQuery 的官方測試套裝。但QUnit一般是足以測試任何常規(guī) javascript 代碼，它甚至可能通過一些 javascript 引擎比如 Rhino 或 V8 來測試服務(wù)器端 JavaScript。
如果你不熟悉“單元測試”的概念，請不要擔心。這不是很難理解的：
代碼如下:
>在計算機編程中，單元測試（又稱為模塊測試）是針對程序模塊(軟件設(shè)計的最小單位)來進行正確性檢驗的測試工作。程序單元是應用的最小可測試部件。在過程化編程中，一個單元就是單個程序、函數(shù)、過程等；對于面向?qū)ο缶幊?，最小單元就是方法，包括基類（超類）、抽象類、或者派生類（子類）中的方法?— 引自維基百科。
簡單地說，你為你的代碼的每個功能寫測試，如果所有這些測試都通過了，那么你可以肯定的是，代碼沒有缺陷（通常，還是由你的測試有多徹底而定）。
二、為什么你要測試你的代碼
如果你以前從未寫過任何單元測試，你可能直接將你的代碼上到網(wǎng)站上，點擊一會看看是否有什么問題出現(xiàn)，并且嘗試去解決你所發(fā)現(xiàn)的問題，采用這種方法會有很多的問題。
首先，這是很膩煩的。點擊事實上并不是一件輕松的工作，因為你不得不確保每樣東西都被點到而且很有可能你錯過了一個或兩個。
其次，你為測試做的每件事情是不能復用的，這意味著它很難回歸。什么是回歸？想像一下你寫了一些代碼并測試，修復了所有你發(fā)現(xiàn)的缺陷，然后發(fā)布。此時，一個 用戶發(fā)送了一些關(guān)于新缺陷的反饋，并且需要一些新功能。你返回到代碼中，修復這些新缺陷并增加新功能。接下來可能會發(fā)生的就是一些舊的缺陷又重現(xiàn)了，這就 叫“回歸”。看，現(xiàn)在你還得再去點擊一遍，而且有可能你還找不到這些舊的擔擔缺陷；即使你這么做，這還需要一段時間才能弄清楚你的問題是由回歸引起的。使用單元測試，你寫測試去發(fā)現(xiàn)缺陷，一旦代碼被修改，您通過測試再篩選一次。如果回歸出現(xiàn)，一些測試一定會失敗，你可以很容易地認出他們，知道哪部分代碼包含了錯誤。既然你知道你剛才修改了什么，就可以很容易地解決。
另外一個單元測試的優(yōu)點，尤其是對于web開發(fā)來說: 它使跨瀏覽器兼容性測試很容易。僅僅在不同瀏覽器中運行你的測試案例就行，如果一個瀏覽器出現(xiàn)問題，你修復它并重新運行這些測試案例，確保不會在別的瀏覽器引起回歸，一旦全部通過測試，你可以肯定的說，所有的目標瀏覽器都支持。
我想提及一個 John Resig 的項目：TestSwarm(http://testswarm.com/)。 它將 Javascript 單元測試帶到了一個新的層次，通過使其分布，這是一個網(wǎng)站，其中包含很多測試案例，任何人都可以去那運行一些測試案例，然后返回結(jié)果會返回到服務(wù)器。通過這種方式，代碼會非常迅速的在不同的瀏覽器進行測試，甚至不同的平臺運行。
三、如何用 QUnit 寫單元測試
那么，你如何正確地用QUnit寫單元測試呢？首先，您需要設(shè)置一個測試環(huán)境：
代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>QUnit Test Suite</title>
<link rel="stylesheet" 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 文件?，F(xiàn)在到了寫些測試的時間了。
單元測試的基石是斷言：
斷言是一個命題，預測你的代碼的返回結(jié)果。如果預測是假的，斷言失敗，你就知道出了問題。
運行斷言，你應該把它們放入測試案例：
代碼如下:
// 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');
})
這里我們定義一個函數(shù)：isEven，用來檢測一個數(shù)字是否為奇數(shù)，并且我們希望測試這個函數(shù)來確認它不會返回錯誤答案。
我們首先調(diào)用 test()，它構(gòu)建了一個測試案例；第一個參數(shù)是一個將被顯示在結(jié)果中的字符串，第二個參數(shù)是包括我們斷主的一個回調(diào)函數(shù)。
我們寫了5個斷言，所有的都是布爾型的。一個布爾型的斷言，期望它的第一個參數(shù)為true。第二個參數(shù)依然是要顯示在結(jié)果中的消息。
這里是你想要得到的，只要你運行測試：
四、深入學習參考
以上只簡單的介紹了 qunit.js ，其斷言方法還有很多，具體可參考 api 文檔：
http://api.qunitjs.com/
單元測試是一個在你發(fā)布你的代碼前測試你的代碼的非常好的方法。如果你以前沒有寫過任何的單元測試，現(xiàn)在是時候開始了！
更多信息請查看IT技術(shù)專欄
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試