Javascript單元測試框架QUnitjs詳細介紹

2019-11-20 20:43:08

字體：大中小

來源：轉載

供稿：網友

一、什么是 QUnit

QUnit（http://qunitjs.com/）是一個非常強大的javascript單元測試框架，可以幫你調試代碼。它是由 jQuery 團隊的成員寫的，而且是 jQuery 的官方測試套裝。但QUnit一般是足以測試任何常規 javascript 代碼，它甚至可能通過一些 javascript 引擎比如 Rhino 或 V8 來測試服務器端 JavaScript。
如果你不熟悉“單元測試”的概念，請不要擔心。這不是很難理解的：

復制代碼代碼如下:

在計算機編程中，單元測試（又稱為模塊測試）是針對程序模塊(軟件設計的最小單位)來進行正確性檢驗的測試工作。程序單元是應用的最小可測試部件。在過程化編程中，一個單元就是單個程序、函數、過程等；對于面向對象編程，最小單元就是方法，包括基類（超類）、抽象類、或者派生類（子類）中的方法。 ― 引自維基百科。

簡單地說，你為你的代碼的每個功能寫測試，如果所有這些測試都通過了，那么你可以肯定的是，代碼沒有缺陷（通常，還是由你的測試有多徹底而定）。

二、為什么你要測試你的代碼

如果你以前從未寫過任何單元測試，你可能直接將你的代碼上到網站上，點擊一會看看是否有什么問題出現，并且嘗試去解決你所發現的問題，采用這種方法會有很多的問題。
首先，這是很膩煩的。點擊事實上并不是一件輕松的工作，因為你不得不確保每樣東西都被點到而且很有可能你錯過了一個或兩個。

其次，你為測試做的每件事情是不能復用的，這意味著它很難回歸。什么是回歸？想像一下你寫了一些代碼并測試，修復了所有你發現的缺陷，然后發布。此時，一個用戶發送了一些關于新缺陷的反饋，并且需要一些新功能。你返回到代碼中，修復這些新缺陷并增加新功能。接下來可能會發生的就是一些舊的缺陷又重現了，這就叫“回歸”?？?，現在你還得再去點擊一遍，而且有可能你還找不到這些舊的擔擔缺陷；即使你這么做，這還需要一段時間才能弄清楚你的問題是由回歸引起的。使用單元測試，你寫測試去發現缺陷，一旦代碼被修改，您通過測試再篩選一次。如果回歸出現，一些測試一定會失敗，你可以很容易地認出他們，知道哪部分代碼包含了錯誤。既然你知道你剛才修改了什么，就可以很容易地解決。

另外一個單元測試的優點，尤其是對于web開發來說: 它使跨瀏覽器兼容性測試很容易。僅僅在不同瀏覽器中運行你的測試案例就行，如果一個瀏覽器出現問題，你修復它并重新運行這些測試案例，確保不會在別的瀏覽器引起回歸，一旦全部通過測試，你可以肯定的說，所有的目標瀏覽器都支持。

我想提及一個 John Resig 的項目：TestSwarm(http://testswarm.com/)。它將 Javascript 單元測試帶到了一個新的層次，通過使其分布，這是一個網站，其中包含很多測試案例，任何人都可以去那運行一些測試案例，然后返回結果會返回到服務器。通過這種方式，代碼會非常迅速的在不同的瀏覽器進行測試，甚至不同的平臺運行。

三、如何用 QUnit 寫單元測試

那么，你如何正確地用QUnit寫單元測試呢？首先，您需要設置一個測試環境：

復制代碼代碼如下:

<!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 文件。現在到了寫些測試的時間了。
單元測試的基石是斷言：

斷言是一個命題，預測你的代碼的返回結果。如果預測是假的，斷言失敗，你就知道出了問題。

運行斷言，你應該把它們放入測試案例：

復制代碼代碼如下:

// 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。第二個參數依然是要顯示在結果中的消息。
這里是你想要得到的，只要你運行測試：

四、深入學習參考