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