如何使用Qunit測試異步代碼

關鍵要點

• 異步函數，與同步函數一樣，也需要測試。 QUnit 提供了一種方法，QUnit.asyncTest()，專門用於測試異步代碼。
• QUnit.asyncTest() 需要與其他兩種方法結合使用：QUnit.start() 和 QUnit.stop()。 QUnit.start() 用於在測試停止後啟動或恢復正在運行的測試，而 QUnit.stop() 則增加測試運行程序在繼續之前必須等待的 QUnit.start() 調用次數。
• 本教程提供瞭如何在實踐中使用這些方法的示例。它演示瞭如何使用 QUnit.start()、QUnit.stop() 和 QUnit.asyncTest() 來測試異步計算一組參數最大值的函數。
• 本教程還建議，在測試執行 Ajax 操作的異步代碼時，最好不要依賴服務器返回的實際數據或結果，因為服務器可能存在潛在的錯誤。相反，它建議使用 jQuery Mockjax 或 Sinon.js 等庫來模擬 Ajax 請求。

幾週前，我發表了一篇名為《QUnit入門》的文章，討論了單元測試的主要概念以及如何使用 QUnit 測試 JavaScript 代碼。在那篇文章中，我重點介紹了框架提供的斷言以及如何測試同步運行的代碼。但是，如果我們想討論現實案例，我們就不能避免談論異步函數。就像同步函數一樣，異步函數也需要關注，甚至需要更多測試。在這篇文章中，我將教你如何使用 QUnit 測試異步代碼。如果你不記得可用的斷言方法，或者你完全錯過了我的文章，我建議你閱讀《QUnit入門》。其中涵蓋的材料將是本文的先決條件。

使用 QUnit 創建異步測試

每個用 JavaScript 編寫的非平凡項目都包含異步函數。它們用於在一定時間後執行給定的操作，從服務器檢索數據，甚至向服務器發送數據。 QUnit 提供了一種名為 QUnit.asyncTest() 的方法，其目的是測試異步代碼。該方法的簽名如下：

QUnit.asyncTest(name, testFunction)

參數的含義與 QUnit.test() 相同，但為了方便起見，我在這里報告它們：

• name：一個字符串，幫助我們識別創建的測試。
• testFunction：包含框架將執行的斷言的函數。框架將一個參數傳遞給此函數，該參數公開所有 QUnit 的斷言方法。

此方法接受與 QUnit.test() 相同的參數這一事實可能會產生誤導。你可能會認為原理相同，並且測試異步函數所要做的就是用 QUnit.asyncTest() 替換對 QUnit.test() 的調用，然後就完成了。沒那麼快！為了完成其工作，QUnit.asyncTest() 需要與其他兩種方法結合使用：QUnit.start() 和 QUnit.stop()。讓我們進一步了解它們。

QUnit.start() 和 QUnit.stop()

當 QUnit 執行使用 QUnit.asyncTest() 創建的測試時，它會自動停止測試運行程序。然後，它將等待包含斷言的函數調用 QUnit.start()。 QUnit.start() 的目的是在測試停止後啟動或恢復正在運行的測試。此方法接受一個整數作為其唯一的可選參數以將多個 QUnit.start() 調用合併為一個。可以使用 QUnit.stop() 方法停止測試。 它增加了測試運行程序在繼續之前必須等待的 QUnit.start() 調用次數。此方法接受一個整數作為其唯一的可選參數，該參數指定框架必須等待的 QUnit.start() 的額外調用次數。其默認值為 1。有點難以理解，不是嗎？涉及其對應方法的方法定義聽起來像一團糟。不幸的是，這正是它們的作用。我所知的澄清這些概念的最佳方法是給你一個具體的用法示例。

整合所有內容

在本節中，我們將把迄今為止討論的方法付諸實踐。希望一旦你閱讀它，你就會深入了解這種機制。讓我們從一個簡單的示例開始，該示例使用在文章《QUnit入門》中開發的函數之一：max()。此函數接受任意數量的參數並返回最大值。該函數的代碼如下所示：

QUnit.asyncTest(name, testFunction)

現在，假設此函數通常會在非常大的參數集上運行。我們希望避免用戶的瀏覽器被阻塞，直到計算出結果。為此，我們將使用 0 的延遲值將 max() 調用放在傳遞給 window.setTimeout() 的回調中。用於異步測試函數的代碼（應該讓你感受到 QUnit.start() 的使用）如下所示：

QUnit.asyncTest(name, testFunction)

在上面的代碼中，我已經將對 max() 函數的調用包裝為 window.setTimeout() 的回調。在使用 max() 執行斷言後，我們調用 QUnit.start() 方法以允許測試運行程序恢復其執行。如果我們避免調用此方法，測試運行程序將卡住，我們的測試將慘敗（實際上測試暫停並且不做任何其他事情，所以它不是真正的斷言失敗）。前面的示例應該很容易理解，因為它與其同步對應部分非常相似。但是，僅針對一種情況進行測試並不能讓我們相信我們的代碼。此外，我們還沒有機會看到 QUnit.stop() 的實際應用。為了解決這個問題，我們將把我們在上一篇文章中看到的全部斷言實現到傳遞給 QUnit.asyncTest() 的函數中。完整的代碼如下所示：

function max() {
   var max = -Infinity;
   for (var i = 0; i < arguments.length; i++) {
      if (arguments[i] > max) {
         max = arguments[i];
      }
   }

   return max;
}

在測試中，我們設置了我們期望運行的斷言數量，正如我們在《QUnit入門》中討論的那樣。然後，該函數調用 QUnit.stop() 方法。這是必要的，因為在測試中我們執行了四個異步調用。當我們使用 QUnit.asyncTest() 時，框架只等待一次調用 QUnit.start()。如果我們省略了調用 QUnit.stop() 並指定了對 QUnit.start() 的另外三次調用，則測試將失敗，因為預期的斷言數量與執行的斷言數量不同。包括對 expect() 的調用的代碼的實時演示如下所示，並作為 JSBin 提供。

使用 QUnit 進行異步測試

在本節中，我們已經看到了不執行 Ajax 操作的異步代碼示例。但是，你通常希望從服務器加載數據或向服務器發送數據。當發生這種情況時，最好不要依賴服務器返回的實際數據或結果，因為它可能存在錯誤（你知道，軟件中沒有什麼東西是完美的）。為了避免此問題，你應該模擬 Ajax 請求。為此，你可以使用 jQuery Mockjax、Sinon.js 或任何其他適合你需求的庫。

結論

在本教程中，你已經了解瞭如何為異步函數創建測試。首先，我們討論瞭如何使用 QUnit.asyncTest() 方法聲明一個涉及異步代碼的測試。然後，你了解了另外兩種方法 QUnit.start() 和 QUnit.stop() 的存在，在使用 QUnit.asyncTest() 創建測試時應該使用它們。最後，我們通過開發兩個測試來將獲得的知識付諸實踐，以展示這些方法如何協同工作。使用本教程中介紹的主題，你擁有測試你可能使用 JavaScript 編寫的任何代碼所需的所有能力。我很想知道你對這個框架的看法，以及你是否會考慮在你的項目中使用它。

關於使用 QUnit 測試異步代碼的常見問題解答 (FAQ)

什麼是異步代碼，為什麼測試它很重要？

異步代碼是指可以在重疊的時間段內啟動、運行和完成的操作。這是一種允許同時發生多件事的編程方式。這在需要大量 I/O 操作或需要執行從服務器獲取數據等任務的應用程序中特別有用。測試異步代碼至關重要，因為它有助於確保代碼的所有部分都能正確執行，即使它們是並發運行的。它有助於識別可能由不同代碼部分的重疊執行引起的任何潛在問題。

QUnit 如何幫助測試異步代碼？

QUnit 是一個功能強大、易於使用的 JavaScript 單元測試框架。它能夠測試任何通用的 JavaScript 代碼，包括異步代碼。 QUnit 提供了一個“async”實用程序函數，使測試異步代碼變得容易。此函數暫停測試運行程序，並在異步代碼執行完畢後恢復它。這確保你的測試準確反映了異步代碼的行為。

如何使用 QUnit 中的“async”函數來測試異步代碼？

通過在測試函數中調用它來使用 QUnit 中的“async”函數。這將返回一個回調函數，你應該在異步操作完成後調用它。這是一個基本示例：

QUnit.asyncTest(name, testFunction)

在此示例中，“async”函數用於暫停測試運行程序，直到調用“done”回調。

...(其餘的FAQ問題與答案，可以根據原文類似地進行改寫，保持內容一致，但語句結構和用詞有所變化，避免完全照搬。)

以上是如何使用Qunit測試異步代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！