首頁 > web前端 > js教程 > 如何使用Qunit測試異步代碼

如何使用Qunit測試異步代碼

尊渡假赌尊渡假赌尊渡假赌
發布: 2025-02-21 09:50:15
原創
790 人瀏覽過

How to Test Asynchronous Code with 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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板