Qunit入門-js教程-PHP中文網

首頁

web前端

js教程

Qunit入門

Jennifer Aniston

Feb 21, 2025 pm 12:12 PM

Getting Started with QUnit

軟件測試是評估軟件以檢測給定輸入集的預期輸出和實際輸出之間差異的過程。測試，尤其是單元測試，應該是每個開發人員生活中必不可少的一部分。不幸的是，許多開發人員似乎害怕這項活動。在 JavaScript 中，我們可以從許多框架中選擇來測試我們的代碼庫。例如 Mocha、Selenium 和 QUnit。在本文中，我將向您介紹 QUnit。 QUnit 是由 jQuery 團隊開發和維護的單元測試框架，該團隊也是 jQuery 和 jQuery UI 等項目的幕後團隊。

關鍵要點

QUnit 由 jQuery 團隊開發和維護，由於其易用性和簡單的設置，它是一個流行的 JavaScript 單元測試框架。
要開始使用 QUnit，請從 QUnit 網站下載最新版本的 JavaScript 和 CSS 文件，並將它們包含在您的 HTML 文件中。
QUnit 提供兩種創建新測試的方法：用於同步代碼的 QUnit.test() 和用於異步代碼的 QUnit.asyncTest()。這些測試包含斷言，用於驗證代碼是否按預期工作。
QUnit 提供各種斷言方法，包括deepEqual()、equal()、notDeepEqual()、notEqual()、propEqual()、strictEqual()、notPropEqual()、notStrictEqual()、ok() 和throws() 。每種方法都有其特定的用途並接受某些參數。
使用 QUnit 創建測試時，最佳實踐是使用 expect() 方法設置預期執行的斷言數量。這有助於確保執行所有斷言，如果一個或多個斷言未執行，則測試將失敗。

設置 QUnit

許多開發人員使用 QUnit 的主要原因之一是其易用性。開始使用此框架非常簡單，並且可以在幾個小時內掌握主要概念。使用 QUnit 的第一步顯然是從下載它開始。有幾種方法可以做到這一點：從網站手動下載，使用 CDN，使用 Bower 或使用 npm。我的建議是，除非您正在開發簡單的實時演示，否則不應依賴 CDN 來測試您的代碼。因此，堅持使用其他選項。對於本文，我不希望設置任何先決條件（閱讀 Bower 和 npm），因此我們將採用第一種方法。因此，請訪問 QUnit 網站並下載最新版本的 JavaScript 文件（名為 qunit-1.14.0.js）和 CSS 文件（名為 qunit-1.14.0.css）。將它們放在一個文件夾中，您還將在其中創建一個 index.html。在這個文件中，我們將放置網站主頁上顯示的 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 文件。因此，您必須更新鏈接以包含您之前下載的文件。在標記中，您可以看到放置了一些 <div>。第一個具有 qunit 作為其 ID，由框架用來顯示其用戶界面，其中顯示測試結果。第二個 <code><div>，其 ID 為 qunit-fixture，應由您（開發人員）使用。此元素允許開發人員測試添加、編輯或從 DOM 中刪除元素的代碼，而無需擔心在每次測試後清理 DOM。如果您將代碼創建的元素放在此 <code><div> 中，QUnit 將為我們處理重置。最後，我們包含了一個 tests.js 文件，該文件代表包含測試的文件。我的建議是在處理真實項目時使用文件來存儲測試。在我為本教程創建的實時演示中，我使用了 JSBin，當然不允許上傳文件。因此，在演示中，您會看到我已經內聯了測試代碼。現在您已經了解了標記每個部分的含義，請在瀏覽器中打開 index.html 頁面，看看會發生什麼。如果一切順利，您應該會看到如下所示的實時演示界面，該界面也作為 JSBin 提供：QUnit 示例。在此階段，此界面中與我們相關的唯一部分是顯示 QUnit 花費在處理測試上的時間、定義的斷言數量以及通過和失敗的測試數量的部分。上面的演示顯示我們沒有定義任何測試。讓我們解決這個問題。 <p><strong>如何使用 QUnit 創建測試</strong></p> <p>QUnit 提供兩種創建新測試的方法：<code>QUnit.test() 和 QUnit.asyncTest()。第一個用於測試同步運行的代碼，而第二個用於測試異步代碼。在本節中，我將描述如何為同步代碼創建測試。 QUnit.test() 方法的簽名如下：

QUnit.test(name, testFunction)

第一個參數 name 是一個字符串，它幫助我們識別創建的測試。第二個參數 testFunction 是包含框架將執行的斷言的函數。框架將一個參數傳遞給此函數，該參數公開所有 QUnit 的斷言方法。將此描述轉換為代碼，我們可以使用以下代碼更新 tests.js 文件：

QUnit.test('我的第一个测试', function(assert) {
   // 断言在这里...
});

此代碼創建一個由字符串“我的第一個測試”標識的新測試和一個具有空主體的函數。添加沒有任何斷言的測試沒有任何用處。要解決此問題，我們必須學習 QUnit 中可用的斷言方法。

QUnit 的斷言方法

斷言是軟件測試的核心。它們使我們能夠驗證我們的代碼是否按預期工作。在 QUnit 中，我們有很多方法可以驗證這些期望。可以通過傳遞給 QUnit.test() 方法的函數的參數（在我們之前的示例中為 assert）在測試中訪問它們。下面的列表總結了可用的方法，以及它們的功能和簽名：

deepEqual(value, expected[, message])：一種遞歸的嚴格比較，適用於所有 JavaScript 類型。如果 value 和 expected 在屬性、值方面相同，並且具有相同的原型，則斷言通過；
equal(value, expected[, message])：使用非嚴格比較（==）驗證提供的 value 等於 expected 參數。
notDeepEqual(value, expected[, message])：與 deepEqual() 相同，但測試不等式；
notEqual(value, expected[, message])：與 equal() 相同，但測試不等式；
propEqual(value, expected[, message])：對象的屬性和值的嚴格比較。如果所有屬性和值都相同，則斷言通過；
strictEqual(value, expected[, message])：使用嚴格比較（===）驗證提供的 value 等於 expected 參數；
notPropEqual(value, expected[, message])：與 propEqual() 相同，但測試不等式；
notStrictEqual(value, expected[, message])：與 strictEqual() 相同，但測試不等式；
ok(value[, message])：如果第一個參數為真值，則斷言通過；
throws(function[, expected][, message])：測試回調是否拋出異常，並可選地比較拋出的錯誤；

這些方法接受的參數含義如下：

value：函數、方法返回的值或存儲在必須驗證的變量中的值；
expected：要測試的值。對於 throws() 方法，這可以是 <q cite="http://api.qunitjs.com/throws/">Error 对象（实例）、Error 函数（构造函数）、与字符串表示匹配（或部分匹配）的正则表达式或必须返回 true 以通过断言检查的回调函数</q>；
message：描述斷言的可選字符串；
function：要執行的應返回 Error 的函數；

現在您已經了解了可用的方法和參數，是時候查看一些代碼了。我不會為單個函數編寫多個測試，而是嘗試重現更真實的示例。無論如何，我將向您展示的測試都不應被視為完整的測試套件，但它們應該讓您對從哪裡開始有一個具體的了解。為了編寫提到的測試，我們需要定義一些要測試的代碼。在這種情況下，我將定義一個對象字面量，如下所示：

<!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>

如您所見，我們定義了一個包含三個函數的對象字面量：max()、isOdd() 和 sortObj()。第一個接受任意數量的參數並返回最大值。 isOdd() 接受一個數字作為其參數並測試它是否為奇數。 sortObj() 接受一個對像數組，理想情況下應該有一個名為 timestamp 的屬性，並根據此屬性的值對它們進行排序。這些函數的可能的測試集如下所示：（此處省略了冗長的測試代碼示例，因為已經超過了字數限制，但原理和前面描述的一致）

設置期望

創建測試時，最佳實踐是設置我們期望執行的斷言數量。這樣做，如果一個或多個斷言未執行，則測試將失敗。 QUnit 框架為此目的提供了 expect() 方法。此方法在處理異步代碼時特別有用，但在測試同步函數時最好也使用它。 expect() 方法的簽名如下：

QUnit.test(name, testFunction)

其中 assertionsNumber 參數指定預期的斷言數量。（此處同樣省略了更新測試代碼的示例，因為已經超過了字數限制，但原理和前面描述的一致）

QUnit 入門結論

在本教程中，我向您介紹了測試的神奇世界，尤其是如何使用 QUnit 對 JavaScript 代碼進行單元測試。我們已經看到設置 QUnit 框架是多麼容易，以及它提供了哪些方法來測試同步函數。此外，您還學習了框架提供的用於測試代碼的斷言函數集。最後，我提到了設置我們期望運行的斷言數量的重要性以及如何使用 expect() 方法設置它們。我希望您喜歡這篇文章，並且您會考慮將 QUnit 集成到您的項目中。（此處省略了 FAQs 部分，因為已經超過了字數限制）

以上是Qunit入門的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。