開發者必備的Javascript單元測試工具
2020-12-12 IT168【IT168專稿】當前,在軟體開發中單元測試越來越受到開發者的重視,它能提高軟體的開發效率,而且能保障開發的質量。以往，單元測試往往多見於服務端的開發中，但隨著Web編程領域的分工逐漸明細，在前端Javascript開發領域中，也可以進行相關的單元測試，以保障前端開發的質量。在本文中，將初步探討如何在Javascript中進行單元測試及其注意要點。
Javascript中的單元測試工具
在Javascript的單元測試中工具中，有很多開源的工具，本文選取其中兩個比較典型實用的工具進行介紹：jsTestDriver和Qunit。先來看下jsTestDriver(下載地址：http://code.google.com/p/js-test-driver/wiki/GettingStarted)。
jsTestDriver以客戶服務端的方式運行，在客戶端發送測試請求到服務端，整個運行是在可以捕捉的瀏覽器中進行的，其優點為它能很容易地與代碼編輯器整合，以及能成為自動構建的一部分。jsTestDriver包括一系列能與Eclipse,Maven和IntelliJ整合的插件，甚至與Visual Studio整合也是可行的(參考這篇文章)，比如下圖是與EditPlus整合的一個示意圖：
jsTestDriver的安裝
安裝jsTestDriver的步驟如下：
1. 從jsTestDriver的下載頁中下載相關的JAR文件，下載地址為：http://code.google.com/p/js-test-driver/downloads/list，下載其中的JsTestDriver-1.3.3a.jar 這個文件
2. 創建兩個文件夾，其中一個為名稱為src的存放Javascript原始碼的文件，另外一個是用來存放測試用例的文件，文件夾命名為src-test。
3. 創建一個配置文件，配置文件名為jsTestDriver.conf，配置文件如下：
server: http://localhost:9876
load:
- src/*.js
- src-test/*.js
這裡指出了啟動位於9876的埠進行監聽，並且先加載src文件夾下的所有js文件夾，然後在加載src-test文件夾下的js文件進行測試。
4. 接下來，我們配置jsTestDriver的服務端，以讓其監控chrome瀏覽器，讓其運行Javascript測試用例。在命令行輸入如下代碼，具體路徑請根據實際情況修改。
"C:\Program Files (x86)\Java\jre6\bin\java" -jar JsTestDriver-1.3.2.jar --port 4224 --browser "C:\Documents and Settings\Tarwn\Local Settings\Application Data\Google\Chrome\Application\chrome.exe"
這樣的話，會在4224埠啟動jsTestDriver，並且會啟動一個chrmoe瀏覽器的實例，這個實例會捕捉所有的在Chrmoe中運行的Javascript單元測試。接下來，編寫一個.cmd文件，在命令方式下執行，以執行測試，測試所有放在src-test中的測試用例，代碼如下：
"C:\Program Files (x86)\Java\jre6\bin\java" -jar JsTestDriver-1.3.2.jar --tests all
Pause
開始編寫Javascript
我們開始編寫一個簡單的Javascript來進行測試，先在src和src-test目錄下，分別編
寫如下代碼：
Src目錄下的mystuff.js
myAwesomeApp = {};
myAwesomeApp.MyAwesomeClass = function(){};
myAwesomeApp.MyAwesomeClass.prototype.add = function(num0, num1){
return num0 + num1;
};
Src-test 目錄下的mystuff.js
TestCase("Sample Test Case",{
"test Number plus Zero Equals Number": function(){
var adder = new myAwesomeApp.MyAwesomeClass();
assertEquals(5, adder.add(5,0));
},
"test Number plus Number Equals Sum": function(){
var adder = new myAwesomeApp.MyAwesomeClass();
assertEquals(8, adder.add(5,3));
},
"test Zero plus Number Equals Number": function(){
var adder = new myAwesomeApp.MyAwesomeClass();
assertEquals(5, adder.add(0,5));
},
"test Number plus Negative of Number Equals Zero": function(){
var adder = new myAwesomeApp.MyAwesomeClass();
assertEquals(0, adder.add(5,-5));
},
"test Fails miserably": function(){
fail("miserably");
}
});
熟悉單元測試的開發者對它們應該不感到陌生。在上面的測試代碼組中，分別測試
了多種用例，用到的都是assertEquals斷言。更多的用法請參考其官方主頁的介紹。
接下來，我們開始運行測試用例，方法為在命令行模式下，
"C:\Program Files (x86)\Java\jre6\bin\java" -jar ../JsTestDriver-1.3.2.jar --port 4224 --browser "C:\Documents and Settings\Tarwn\Local Settings\Application Data\Google\Chrome\Application\chrome.exe"
這樣就可以啟動chrome瀏覽器監聽相關的Javascript單元測試用例。運行後可以看到打開了瀏覽器，如下圖：
▲
接下來開始進行單元測試，命令行輸入如下代碼：
"C:\Program Files (x86)\Java\jre6\bin\java" -jar ../JsTestDriver-1.3.2.jar --tests all
運行後，會在瀏覽器中看到相關的輸出結果，如下：
....F
Total 5 tests (Passed: 4; Fails: 1; Errors: 0) (0.00 ms)
Chrome 13.0.782.220 Windows: Run 5 tests (Passed: 4; Fails: 1; Errors 0) (0.00 ms)
Object Literal Test Case.test Fails miserably failed (0.00 ms): AssertError: miserably
AssertError: miserably
at Object.test Fails miserably (http://localhost:4224/test/src-test/mystuff.js:22:3)
Tests failed: Tests failed. See log for details.
從結果中可以看到，.S表示成功通過的單元測試，.F為失敗的單元測試用例，而.E為錯誤的測試用例，信息中還指出了有多少個單元測試，通過了多少，多少個沒有通過。
jsTestDriver還支持傳統的setup和teardown等單元測試方法。更多的相關介紹可以參考其在線幫助手冊。
開源的單元測試工具Qunit
接下來，介紹另外一款開源的單元測試工具Qunit(下載地址：http://code.jquery.com/qunit)，它是完全基於瀏覽器運行的，因此不需要象jsTestDriver那麼安裝麻煩，而且值得一提的是，這個框架是jQuery的單元測試Javascript框架，功能十分強大。下面是安裝方法：
1) 只需要下載qunit.js(http://code.jquery.com/qunit/qunit-git.js)和qunit.css(http://code.jquery.com/qunit/qunit-git.css)
2) 我們需要編寫一個Qunit的界面，命名為testrunner.html,代碼如下：
<DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="qunit.js" type="text/javascript"></script>
<link rel="stylesheet" media="all" href="qunit.css" />
<script src="src/mystuff.js" type="text/javascript"></script>
<script src="src-test/mystuff_qunit.js" type="text/javascript"></script>
</head>
<body>
<h1 id="qunit-header">MyStuff</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>
這個頁面中分別引入了jquery類庫，qunit的類庫，還有就是我們之前編寫的，位於Src目錄下的原先的javascript腳本mystuff.js，以及位於src-test目錄下的測試用例Mystuff_qunit.js。
接下來，來看下測試用例文件Mystuff_qunit.js，代碼如下：
module("Sample Test Case");
test("Number plus Zero Equals Number", function(){
var adder = new myAwesomeApp.MyAwesomeClass();
equals( adder.add(5,0),5);
});
test("Number plus Number Equals Sum", function(){
var adder = new myAwesomeApp.MyAwesomeClass();
equals(adder.add(5,3),8);
});
test("Zero plus Number Equals Number", function(){
var adder = new myAwesomeApp.MyAwesomeClass();
equals(adder.add(0,5),5);
});
test("Number plus Negative of Number Equals Zero", function(){
var adder = new myAwesomeApp.MyAwesomeClass();
equals(adder.add(5,-5),0);
});
test("Fails miserably", function(){
ok(false,"miserably");
});
這個看上去跟jsTestDriver有點象，但注意的是在斷言方法中，參數的順序不同，即在qunit中，斷言的參數順序為：Qunit.equals(actual, expected)，即實際的數值。在前面，而期望的數值在後面，這點請注意。最後，直接在瀏覽器中運行test.html,可以看到效果如下：
▲
其中，紅色部分即時表示沒能通過的單元測試。
整合jsTestDriver和Qunit
由於jsTestDriver和Qunit各有優勢，因此我們可以考慮對其進行整合。比如，我們可以將jsTestDriver編寫的腳本移植到Qunit中去，由於它們的斷言參數順序有不同，因此可以修改一下，編寫名為jsTestDriverInQunit.js的腳本如下：
function TestCase(name, tests){
if(tests != null)
module(name);
for(var key in tests){
if(tests[key] instanceof Function && key.indexOf("test") == 0){
test(key,tests[key]);
}
}
return function(){};
}
function assertEquals(arg0,arg1){
equals(arg1,arg0);
}
function fail(msg){
ok(false,msg);
}
並且將testrunner.html修改如下：
<DOCTYPE html>
2. <html>
3. <head>
4. <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
5. <script src="qunit.js" type="text/javascript"></script>
6. <script src="jsTestDriverInQunit.js" type="text/javascript"></script>
7. <link rel="stylesheet" media="all" href="qunit.css" />
8.
9. <script src="src/mystuff.js" type="text/javascript"></script>
10. <script src="src-test/mystuff.js" type="text/javascript"></script>
11. </head>
12. <body>
13. <h1 id="qunit-header">MyStuff</h1>
14. <h2 id="qunit-banner"></h2>
15. <h2 id="qunit-userAgent"></h2>
16. <ol id="qunit-tests"></ol>
17. </body>
18. </html>
這樣一來，我們無論是使用jsTestDriver還是使用Qunit，都可以都使用同一套測試用例了。
此外，還有一個開源項目提供了將Qunit轉化為jsTestDriver的功能，項目地址為：
http://code.google.com/p/js-test-driver/wiki/QUnitAdapter。
小結
本文簡單介紹了如何使用兩款Javascript單元測試工具進行前端的開發單元測試，前端的單元測試在複雜的前端Javascript開發中，能夠保證前端開發的質量，值得前端開發者仔細研究學習。
相關焦點
-
開發者眼中最好的 22 款 GUI 測試工具
Java測試框架，它能夠幫助開發者測試Java用戶界面。開發者可通過腳本和編譯代碼兩種方式來使用Abbot框架，這就是為什麼它被認為是在開發者的系統 測試和QA的功能測試中都能用到的最完美的GUI測試工具。 -
JavaScript 測試教程 part 1:用 Jest 進行單元測試[每日前端夜話0xE7]
本文是 JavaScript 測試教程 系列中的第1部分1. JavaScript測試教程-part 1：用 Jest 進行單元測試2. JavaScript測試教程–part 2：引入 Enzyme 並測試 React 組件3. -
.NET開發者必備的11款免費工具
如今，HTML5，jQuery，JavaScript等等這些熱門技術，受到了開發者們的強烈追捧，有了這些開發工具也為開發者們減輕了許多負擔。本文為開發者介紹了11款.NET框架，這些框架有很多優點，比如提供用戶界面，數據訪問，資料庫連接，Web應用開發，加密，數值算法算法，網絡通信，以及一些其它的服務。 -
JavaScript開發者的27個神奇VSCode工具
由於其內置開發工具支持TypeScript和Chrome開發者工具，這款編輯器讓人越用越喜歡。每個人都能使用和修改的無限擴展的開放原始碼，誰不愛呢？希望這篇文章能幫你找到擴充開發工具箱的新工具。雖然下列工具並不都是JavaScript語言專用，但它們都是JavaScript開發者會感興趣的。 -
如何避免 JavaScript 開發者常犯的 9 個錯誤?
在這篇文章中，我們將介紹 9 個常見的錯誤（或者說不好的實踐）以及它們的解決方案，幫助你成為更好的 JavaScript 開發者。將賦值操作符（=）和相等操作符（==，===）混為一談正如名稱所示，賦值操作符是用來給變量賦值的。開發者常常把它與相等操作符混淆。 -
開發者需知的10類工具
作為一個軟體開發者，你不可避免地需要用到各種工具來設計、理解、編輯任何程序，本文作者按類型總結了10類開發者須知的工具。CSDN摘譯如下：免責聲明：「最好」的軟體工具通常屬於主觀看法，也許你並不同意我的觀點，但是也可以從中獲取所需。1. -
阿里新型單元測試 Mock 工具開源
Mock測試八股文Java的Mock工具伴隨著單元測試技術不斷迭代發展，可謂前僕後繼、歷久彌新，雖然原理各不相同，但核心的使用模式卻幾乎沒發生過多少變化。無需初始化框架，且Mock定義無需侵入測試用例，更無需開發者操心Mock方法如何注入。一切被@MockMethod註解安排的明明白白：在被測類中凡是調用DatabaseDAO對象write()方法的地方，統統變成空調用並且返回數值「4」。 -
Java開發者必備的六款工具
每一位Java程式設計師都會有套工具來應對工作上的挑戰。多年來，Java程式設計師使用軟體來完成他們的工作。有很多工具對他們是有用的，不過對於初入行的人員來說，尋找合適的工具是困難的，並且是浪費時間的。而今天我們將列出六款Java程式設計師必備的工具。1. Notepad++ -
JavaScript 開發者年度調查報告 - OSCHINA - 中文開源技術交流社區
>你寫測試麼？While 21.7% never write any tests, most do write some tests, and 34.8% always write tests.有 21.7% 的開發者表示他們從不寫任何測試。大部分人偶爾寫一些測試。34.8% 的人總是寫測試。 -
Java 程式設計師必備的 10 個開源工具!
GitGit是Java程式設計師的另一個必備工具，它是一個免費的開源分布式版本控制系統，旨在快速高效地處理從很小到非常大的項目版本管理。Git易於學習，佔用空間小，具有超強的性能。它有助於自動化軟體開發，例如編譯項目，運行單元測試，集成測試，生成文檔以及在本地和遠程存儲庫上載工件。主要用於：● 持續、自動地構建/測試軟體項目，如CruiseControl與DamageControl。● 監控一些定時執行的任務。它是在項目中持續集成中最流行的工具之一。如果你還沒有開始使用Jenkins，那就從現在開始吧。4. -
用Jasmine和Blanket編寫基於Web的客戶端單元測試
在本文中，我們將介紹兩種基於JavaScript的編寫單元測試的軟體包，它們背後的代碼以及最佳使用方式。前言在編寫一個網站時，或者更經常地 - 一個單頁的應用程式 - 需要測試它，就像其他任何代碼一樣。 -
開發者最愛的6種實用型性能測試工具
首頁 > 傳媒 > 關鍵詞 > 開發者最新資訊 > 正文 開發者最愛的6種實用型性能測試工具 -
推薦幾款非常不錯的Node.js測試工具
Node.js是建立在Google V8 JavaScript引擎之上的網絡伺服器框架，允許開發者能夠使用客戶端語言JavaScript在伺服器端編碼。此前我們曾發過一篇文章《百萬級並發 Node.js也能行》，NodeJS在實時性方面的功能有目共睹，相信沒有什麼可以擋住其前進的腳步。 -
14款優秀的JavaScript調試工具大盤點
此款小工具有望通過格式化JSON數據，從而使得它能便於我們人腦的閱讀和調試。 官方網站：http://gruntjs.com/ 5.JS Bin JS Bin是一款專為協助avaScript和CSS代碼的分支測試片段而設計的web應用程式，在給定環境下，調試代碼進行和諧工作。 JS Bin允許編輯和測試JavaScript和HTML。你如果覺得ok的話，還可以保存並發送URL給小夥伴進行審查或尋求幫助。 -
單元測試可測試程式設計師代碼編寫的正確性,如何使用VS2019測試項目
單元測試是指編寫代碼來驗證開發者編寫代碼的正確性，一般單元測試也是由開發者完成的，自已開發單元測試代碼來檢查自己編寫代碼的通過性。定義：單元測試是開發人員編寫的、用於檢測在特定條件下目標代碼正確性的代碼，單元測試是代碼級別的測試。 -
iOS開發者必備:九大設計類工具
現如今，iOS開發涉及到方方面面，iOS開發工具也如雨後春筍般紛紛出現。對於開發者和設計師來說，擁有一款功能強大且實用的開發工具能夠極大提升他們的工作效率。那麼如何選擇一款名副其實的開發工具也就顯得重中之重，下面就讓我們盤點下當下最為流行和實用的設計類開發工具。 -
12 個 GitHub 上超火的 JavaScript 奇技淫巧項目,找到寫 JavaScript 的靈感!
已經推薦了 面試項目、css奇技淫巧項目、代碼規範項目、數據結構與算法項目、管理後臺模板、前端必備在線工具 等專題的近 100 個優秀項目了。33 個概念這個項目是為了幫助開發者掌握 JavaScript 概念而創立的。 -
web開發者不可錯過的11個JavaScript工具
JavaScript即將接管Web世界，如雨後春筍版冒出的JavaScript工具更是讓web開發者無所適從。本文我們為大家推薦11款嶄露頭角但功能強大的JavaScript工具，是追逐web設計新潮流（界面簡潔、面向移動、強調互動）中不可或缺的好幫手。 -
3個C 單元測試工具,到底誰才是王者?
主流C#單元測試工具我們調研了以下開源C#單元測試工具（開源工具數據來自於GitHub）：C#單元測試相關的開源軟體中，NUnit及XUnit.NET星級排名靠前，MsTest是微軟公司開發的集成在Visual Studio中的C#單元測試工具，所以本文選取了星級排名前兩名的 -
50個實用的JavaScript工具
安全工具 AttackAPI AttackAPI是一個基於Web的攻擊構造庫，它可以結合PHP、JavaScript及其他客戶端和伺服器端技術進行使用。 jsfuzzer 它是一個fuzzing工具，幫助你使用JavaScript編寫/測試attack vectors。 新的替代JavaScript和Ajax的開發框架 Clean AJAX Clean一個開源的Ajax引擎，一組簡化AJAX開發的高級接口。