軟件測試是評估軟件以檢測給定輸入集的預(yù)期輸出和實際輸出之間差異的過程。測試，尤其是單元測試，應(yīng)該是每個開發(fā)人員生活中必不可少的一部分。不幸的是，許多開發(fā)人員似乎害怕這項活動。在 JavaScript 中，我們可以從許多框架中選擇來測試我們的代碼庫。例如 Mocha、Selenium 和 QUnit。在本文中，我將向您介紹 QUnit。 QUnit 是由 jQuery 團隊開發(fā)和維護的單元測試框架，該團隊也是 jQuery 和 jQuery UI 等項目的幕後團隊。
關(guān)鍵要點
- QUnit 由 jQuery 團隊開發(fā)和維護，由於其易用性和簡單的設(shè)置，它是一個流行的 JavaScript 單元測試框架。
- 要開始使用 QUnit，請從 QUnit 網(wǎng)站下載最新版本的 JavaScript 和 CSS 文件，並將它們包含在您的 HTML 文件中。
- QUnit 提供兩種創(chuàng)建新測試的方法：用於同步代碼的
QUnit.test()和用於異步代碼的QUnit.asyncTest()。這些測試包含斷言，用於驗證代碼是否按預(yù)期工作。 - QUnit 提供各種斷言方法，包括
deepEqual()、equal()、notDeepEqual()、notEqual()、propEqual()、strictEqual()、notPropEqual()、notStrictEqual()、ok()和throws()。每種方法都有其特定的用途並接受某些參數(shù)。 - 使用 QUnit 創(chuàng)建測試時，最佳實踐是使用
expect()方法設(shè)置預(yù)期執(zhí)行的斷言數(shù)量。這有助於確保執(zhí)行所有斷言，如果一個或多個斷言未執(zhí)行，則測試將失敗。
設(shè)置 QUnit
許多開發(fā)人員使用 QUnit 的主要原因之一是其易用性。開始使用此框架非常簡單，並且可以在幾個小時內(nèi)掌握主要概念。使用 QUnit 的第一步顯然是從下載它開始。有幾種方法可以做到這一點：從網(wǎng)站手動下載，使用 CDN，使用 Bower 或使用 npm。我的建議是，除非您正在開發(fā)簡單的實時演示，否則不應(yīng)依賴 CDN 來測試您的代碼。因此，堅持使用其他選項。對於本文，我不希望設(shè)置任何先決條件（閱讀 Bower 和 npm），因此我們將採用第一種方法。因此，請訪問 QUnit 網(wǎng)站並下載最新版本的 JavaScript 文件（名為 qunit-1.14.0.js）和 CSS 文件（名為 qunit-1.14.0.css）。將它們放在一個文件夾中，您還將在其中創(chuàng)建一個 index.html。在這個文件中，我們將放置網(wǎng)站主頁上顯示的 HTML 代碼，為了方便起見，我在下面重複一下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet" href="qunit-1.14.0.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <??> <??> </body> </html>
如您所見，此代碼使用 CDN 包含 CSS 和 JavaScript 文件。因此，您必須更新鏈接以包含您之前下載的文件。在標(biāo)記中，您可以看到放置了一些 <div>。第一個具有 qunit 作為其 ID，由框架用來顯示其用戶界面，其中顯示測試結(jié)果。第二個 <div>，其 ID 為 qunit-fixture，應(yīng)由您（開發(fā)人員）使用。此元素允許開發(fā)人員測試添加、編輯或從 DOM 中刪除元素的代碼，而無需擔(dān)心在每次測試後清理 DOM。如果您將代碼創(chuàng)建的元素放在此 <div> 中，QUnit 將為我們處理重置。最後，我們包含了一個 tests.js 文件，該文件代表包含測試的文件。我的建議是在處理真實項目時使用文件來存儲測試。在我為本教程創(chuàng)建的實時演示中，我使用了 JSBin，當(dāng)然不允許上傳文件。因此，在演示中，您會看到我已經(jīng)內(nèi)聯(lián)了測試代碼?，F(xiàn)在您已經(jīng)了解了標(biāo)記每個部分的含義，請在瀏覽器中打開 index.html 頁面，看看會發(fā)生什麼。如果一切順利，您應(yīng)該會看到如下所示的實時演示界面，該界面也作為 JSBin 提供：QUnit 示例。在此階段，此界面中與我們相關(guān)的唯一部分是顯示 QUnit 花費在處理測試上的時間、定義的斷言數(shù)量以及通過和失敗的測試數(shù)量的部分。上面的演示顯示我們沒有定義任何測試。讓我們解決這個問題。
如何使用 QUnit 創(chuàng)建測試
QUnit 提供兩種創(chuàng)建新測試的方法：QUnit.test() 和 QUnit.asyncTest()。第一個用於測試同步運行的代碼，而第二個用於測試異步代碼。在本節(jié)中，我將描述如何為同步代碼創(chuàng)建測試。 QUnit.test() 方法的簽名如下：
QUnit.test(name, testFunction)
第一個參數(shù) name 是一個字符串，它幫助我們識別創(chuàng)建的測試。第二個參數(shù) testFunction 是包含框架將執(zhí)行的斷言的函數(shù)?？蚣軐⒁粋€參數(shù)傳遞給此函數(shù)，該參數(shù)公開所有 QUnit 的斷言方法。將此描述轉(zhuǎn)換為代碼，我們可以使用以下代碼更新 tests.js 文件：
QUnit.test('我的第一個測試', function(assert) {
// 斷言在這里...
});
此代碼創(chuàng)建一個由字符串“我的第一個測試”標(biāo)識的新測試和一個具有空主體的函數(shù)。添加沒有任何斷言的測試沒有任何用處。要解決此問題，我們必須學(xué)習(xí) QUnit 中可用的斷言方法。
QUnit 的斷言方法
斷言是軟件測試的核心。它們使我們能夠驗證我們的代碼是否按預(yù)期工作。在 QUnit 中，我們有很多方法可以驗證這些期望?？梢酝ㄟ^傳遞給 QUnit.test() 方法的函數(shù)的參數(shù)（在我們之前的示例中為 assert）在測試中訪問它們。下面的列表總結(jié)了可用的方法，以及它們的功能和簽名：
deepEqual(value, expected[, message])：一種遞歸的嚴格比較，適用於所有 JavaScript 類型。如果value和expected在屬性、值方面相同，並且具有相同的原型，則斷言通過；equal(value, expected[, message])：使用非嚴格比較（==）驗證提供的value等於expected參數(shù)。notDeepEqual(value, expected[, message])：與deepEqual()相同，但測試不等式；notEqual(value, expected[, message])：與equal()相同，但測試不等式；propEqual(value, expected[, message])：對象的屬性和值的嚴格比較。如果所有屬性和值都相同，則斷言通過；strictEqual(value, expected[, message])：使用嚴格比較（===）驗證提供的value等於expected參數(shù)；notPropEqual(value, expected[, message])：與propEqual()相同，但測試不等式；notStrictEqual(value, expected[, message])：與strictEqual()相同，但測試不等式；ok(value[, message])：如果第一個參數(shù)為真值，則斷言通過；throws(function[, expected][, message])：測試回調(diào)是否拋出異常，並可選地比較拋出的錯誤；
這些方法接受的參數(shù)含義如下：
value：函數(shù)、方法返回的值或存儲在必須驗證的變量中的值；expected：要測試的值。對於throws()方法，這可以是<q cite="http://api.qunitjs.com/throws/">Error 對象（實例）、Error 函數(shù)（構(gòu)造函數(shù)）、與字符串表示匹配（或部分匹配）的正則表達式或必須返回 true 以通過斷言檢查的回調(diào)函數(shù)</q>；message：描述斷言的可選字符串；function：要執(zhí)行的應(yīng)返回 Error 的函數(shù)；
現(xiàn)在您已經(jīng)了解了可用的方法和參數(shù)，是時候查看一些代碼了。我不會為單個函數(shù)編寫多個測試，而是嘗試重現(xiàn)更真實的示例。無論如何，我將向您展示的測試都不應(yīng)被視為完整的測試套件，但它們應(yīng)該讓您對從哪裡開始有一個具體的了解。為了編寫提到的測試，我們需要定義一些要測試的代碼。在這種情況下，我將定義一個對象字面量，如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet" href="qunit-1.14.0.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <??> <??> </body> </html>
如您所見，我們定義了一個包含三個函數(shù)的對象字面量：max()、isOdd() 和 sortObj()。第一個接受任意數(shù)量的參數(shù)並返回最大值。 isOdd() 接受一個數(shù)字作為其參數(shù)並測試它是否為奇數(shù)。 sortObj() 接受一個對像數(shù)組，理想情況下應(yīng)該有一個名為 timestamp 的屬性，並根據(jù)此屬性的值對它們進行排序。這些函數(shù)的可能的測試集如下所示：（此處省略了冗長的測試代碼示例，因為已經(jīng)超過了字數(shù)限制，但原理和前面描述的一致）
設(shè)置期望
創(chuàng)建測試時，最佳實踐是設(shè)置我們期望執(zhí)行的斷言數(shù)量。這樣做，如果一個或多個斷言未執(zhí)行，則測試將失敗。 QUnit 框架為此目的提供了 expect() 方法。此方法在處理異步代碼時特別有用，但在測試同步函數(shù)時最好也使用它。 expect() 方法的簽名如下：
QUnit.test(name, testFunction)
其中 assertionsNumber 參數(shù)指定預(yù)期的斷言數(shù)量。 （此處同樣省略了更新測試代碼的示例，因為已經(jīng)超過了字數(shù)限制，但原理和前面描述的一致）
QUnit 入門結(jié)論
在本教程中，我向您介紹了測試的神奇世界，尤其是如何使用 QUnit 對 JavaScript 代碼進行單元測試。我們已經(jīng)看到設(shè)置 QUnit 框架是多麼容易，以及它提供了哪些方法來測試同步函數(shù)。此外，您還學(xué)習(xí)了框架提供的用於測試代碼的斷言函數(shù)集。最後，我提到了設(shè)置我們期望運行的斷言數(shù)量的重要性以及如何使用 expect() 方法設(shè)置它們。我希望您喜歡這篇文章，並且您會考慮將 QUnit 集成到您的項目中。 （此處省略了 FAQs 部分，因為已經(jīng)超過了字數(shù)限制）
以上是Qunit入門的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
Java vs. JavaScript：清除混亂
Jun 20, 2025 am 12:27 AM
Java和JavaScript是不同的編程語言，各自適用於不同的應(yīng)用場景。 Java用於大型企業(yè)和移動應(yīng)用開發(fā)，而JavaScript主要用於網(wǎng)頁開發(fā)。
JavaScript評論：簡短說明
Jun 19, 2025 am 12:40 AM
JavascriptconcommentsenceenceEncorenceEnterential gransimenting，reading and guidingCodeeXecution.1）單inecommentsareusedforquickexplanations.2）多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3）
如何在JS中與日期和時間合作？
Jul 01, 2025 am 01:27 AM
JavaScript中的日期和時間處理需注意以下幾點：1.創(chuàng)建Date對像有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設(shè)置時間信息可用get和set方法，注意月份從0開始；3.手動格式化日期需拼接字符串，也可使用第三方庫；4.處理時區(qū)問題建議使用支持時區(qū)的庫，如Luxon。掌握這些要點能有效避免常見錯誤。
為什麼要將標(biāo)籤放在的底部？
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
JavaScript與Java：開發(fā)人員的全面比較
Jun 20, 2025 am 12:21 AM
JavaScriptIspreferredforredforwebdevelverment，而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1）JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2）
JavaScript：探索用於高效編碼的數(shù)據(jù)類型
Jun 20, 2025 am 12:46 AM
javascripthassevenfundaMentalDatatypes：數(shù)字，弦，布爾值，未定義，null，object和symbol.1）numberSeadUble-eaduble-ecisionFormat，forwidevaluerangesbutbecautious.2）
什麼是在DOM中冒泡和捕獲的事件？
Jul 02, 2025 am 01:19 AM
事件捕獲和冒泡是DOM中事件傳播的兩個階段，捕獲是從頂層向下到目標(biāo)元素，冒泡是從目標(biāo)元素向上傳播到頂層。 1.事件捕獲通過addEventListener的useCapture參數(shù)設(shè)為true實現(xiàn)；2.事件冒泡是默認行為，useCapture設(shè)為false或省略；3.可使用event.stopPropagation()阻止事件傳播；4.冒泡支持事件委託，提高動態(tài)內(nèi)容處理效率；5.捕獲可用於提前攔截事件，如日誌記錄或錯誤處理。了解這兩個階段有助於精確控制JavaScript響應(yīng)用戶操作的時機和方式。
如何減少JavaScript應(yīng)用程序的有效載荷大?。?/a>
