單位使用摩卡和柴測試您的JavaScript

下面：

<!-- load your test files here -->

>添加了腳本後，您可以將測試跑者頁面加載到選擇的瀏覽器中。

測試結果

進行測試時，測試結果將看起來像這樣：

>

>請注意，我們輸入的描述及其功能顯示在輸出中 - 測試在描述下分組。請注意，還可以嵌套描述塊以創建進一步的子組。

>

>讓我們看看一個失敗的測試的外觀。

>

在測試中的行上說：

assert.equal(arr.length, 0);

>將數字0替換為1。這使得測試失敗，因為數組的長度不再匹配預期值。 >

如果您再次運行測試，則會在紅色中看到失敗的測試，並描述出了什麼問題。

>

測試的好處之一是它們可以幫助您更快地發現錯誤，但是此錯誤在這方面並不是很有幫助。我們可以修復它。

大多數斷言功能也可以採用可選消息參數。這是當斷言失敗時顯示的消息。使用此參數使錯誤消息易於理解是一個好主意。

>

我們可以在我們的斷言中添加一條消息：

assert.equal(arr.length, 1, 'Array length was not 0');

如果您重新運行測試，則自定義消息將出現而不是默認。

>

>讓我們將主張切換回原狀 - 用0替換1，然後再次運行測試以確保它們通過。

將其放在一起

到目前為止，我們已經研究了相當簡單的示例。讓我們將我們所學的知識付諸實踐，看看如何測試更現實的代碼。

>

>這是一個將CSS類添加到元素的函數。這應該在一個新文件js/className.js。

為了使其更有趣，我只有在該類不存在的元素類名稱屬性中才能添加一個新類 - 畢竟誰想看

？

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

>

在最好的情況下，我們將在

>之前為此功能編寫測試。我們編寫代碼。但是以測試驅動的開發是一個複雜的話題，就目前而言，我們只想專注於編寫測試。

開始，讓我們回想一下單元測試背後的基本思想：我們給出某些輸入的功能，然後驗證功能的行為。那麼此功能的輸入和行為是什麼？ 給出一個元素和一個類名稱：

• >如果元素的className屬性不包含類名稱，則應添加。
>
• 如果元素的className屬性確實包含類名稱，則不應添加。

>讓我們將這些案例轉換為兩個測試。在測試目錄中，創建一個新的文件classNametest.js並添加以下內容：

>

<!-- load your test files here -->

>我們將措辭稍微更改為“ IT應該執行X”表單，並與測試一起使用。這意味著它的讀數有點更好，但是基本上仍然是我們上面列出的人類可讀形式。從想法到測試通常比這更困難。

>

但是，等等，測試功能在哪裡？好吧，當我們省略其第二個參數時，摩卡咖啡在測試結果中將這些測試標記為待處理

。這是設置許多測試的便捷方法 - 有點像您打算寫的待辦事項列表。 > 讓我們繼續實施第一個測試。

在此測試中，我們創建一個元素變量，並將其作為參數傳遞給AddClass函數，以及字符串測試類（要添加的新類）。然後，我們使用斷言將課程包含在值中。

>

assert.equal(arr.length, 0);

>再次，我們從最初的想法開始了 - 給定一個元素和一個類名稱，應將其添加到類列表中 - 並以相當簡單的方式將其轉換為代碼。

>

>儘管此功能旨在與DOM元素一起使用，但我們在此處使用一個普通的JS對象。有時，我們可以以這種方式利用JavaScript的動態性質來簡化我們的測試。如果我們不這樣做，我們將需要創建一個實際元素，這將使我們的測試代碼複雜化。作為另一個好處，由於我們不使用DOM，因此我們也可以在Node.js中運行此測試。

在瀏覽器中運行測試

要在瀏覽器中運行測試，您需要將className.js和classNametest.js添加到跑步者：

：

>您現在應該看到一個測試通行證，另一種測試顯示為待處理，如以下Codepen所證明的那樣。請注意，代碼與示例略有不同，以使代碼在Codepen環境中起作用。

>請參閱codepen上的sitepoint（@sitepoint）的摩卡（1）的筆單元測試。

assert.equal(arr.length, 1, 'Array length was not 0');

接下來，讓我們實現第二個測試吧……

>

>經常進行測試是一個很好的習慣，所以讓我們檢查一下如果我們現在進行測試會發生什麼。正如預期的那樣，它們應該通過。

這是另一個實施第二個測試的Codepen。

>

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

>請參閱codepen上的sitepoint（@sitepoint）的摩卡（2）的筆單元測試。

但請堅持下去！我實際上有點欺騙你。我們尚未考慮此功能的第三個行為。該功能也有一個錯誤 - 相當嚴重的函數。這只是三行函數，但您注意到了嗎？

>

>讓我們再為第三個行為寫一個測試，該行為將錯誤視為獎勵。

<!-- load your test files here -->

這次測試失敗。您可以在下面的Codepen中看到它。這裡的問題很簡單：元素中的CSS類名稱應由空間分開。但是，我們當前的AddClass實現不會添加空間！

>請參閱codepen上的sitepoint（@sitepoint）的摩卡（3）的筆單元測試。

>讓我們修復功能並進行測試。

assert.equal(arr.length, 0);

>這是帶有固定功能和通過測試的最終代碼蛋

>請參閱codepen上的sitepoint（@sitepoint）的摩卡（4）的筆單位測試。

在節點上運行測試

在節點中，僅在同一文件中的其他事物可見。由於className.js和classNametest.js在不同的文件中，我們需要找到一種將一個公開的方法。這樣做的標準方法是通過使用模塊。如果需要復習，則可以在此處閱讀所有內容：了解node.js

中的模塊和導出

代碼基本上保持不變，但結構略有不同：>

，如您所見，測試通過了。

assert.equal(arr.length, 1, 'Array length was not 0');

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

下一步是什麼？ 如您所見，測試不必復雜或困難。就像編寫JavaScript應用程序的其他方面一樣，您也有一些重複的基本模式。一旦熟悉這些，您就可以一遍又一遍地使用它們。

>

，但這只是刮擦表面。關於單元測試還有很多要學習的內容。

>

測試更複雜的系統

>

如何處理AJAX，數據庫和其他“外部”事物？

>測試驅動的開發
• 如果您想繼續學習此信息，我創建了一個免費的JavaScript單元測試QuickStart系列。如果您發現這篇文章有用，則絕對應該在此處查看。
• 另外，如果視頻更像是您的樣式，您可能對Sitepoint Premium的課程感興趣：Node.js.
中的測試驅動開發

經常詢問有關使用摩卡和柴的單位測試JavaScript的問題

>如何在JavaScript中安裝Mocha和Chai進行單位測試？
>

>要安裝Mocha和Chai，您需要在系統上安裝Node.js和NPM。一旦擁有這些，您可以使用NPM安裝摩卡和柴。打開終端並導航到您的項目目錄。然後，運行以下命令：

npm install -save-dev mocha chai

>此命令安裝摩卡和柴作為您項目的devDepentencies。 -save-dev標誌用於在您的軟件包中添加它們為開發依賴。 json文件。

>如何使用Mocha和Chai和Chai編寫基本測試？摩卡咖啡和柴涉及創建一個測試文件並在其中編寫測試案例。這是一個簡單的示例：

var Expect = require（'chai'）。期望;

descript（'Basic Mocha string test'，function（）{ it（'應該返回字符串中的charachter'，function（）{
>期望（'Hello'） 。此示例，描述是一個測試套件，該套件將相關的測試分組，這是一個測試案例。 CHAI的期望功能用於主張預期的輸出。
>如何運行摩卡咖啡測試？

運行摩卡咖啡測試，導航到終端中的項目目錄並運行以下命令：
>此命令運行安裝在node_modules文件夾中的摩卡二進制二進制文件。如果您想簡單地將此命令作為摩卡咖啡運行，則可以使用NPM install -G Mocha在全球安裝摩卡樣式- 應該，期望和斷言。應該使用應有的屬性擴展每個對像以啟動鏈條。期望風格提供了一種更傳統的基於功能的方法。斷言風格提供了一種經典的，簡單的寫作方式。

>如何使用摩卡咖啡和Chai？

mocha和chai測試異步代碼，並提供了幾種測試異步代碼的方法。您可以使用回調，承諾或異步/等待。這是一個使用異步/等待的示例：

> it （'async test'，async function（）{
const result =等待myAsyncfunction（）;
> ）;

}）;
在此示例中，myasyncfunction是一個返回承諾的異步函數。等待的關鍵字用於等待承諾在繼續測試之前解決。

>

>如何在摩卡咖啡中使用鉤子？


摩卡咖啡提供類似以前，之後，之前和之後的鉤子，您可以用來設置先決條件並在測試後清理。這是一個示例：

describe（'hooks'，function（）{
> function（function（）{
//在此塊
}中進行第一個測試之前一次運行一次）; //在此塊
}中進行最後一次測試後一次運行一次）此塊中的每個測試
}）;


aftereach（function（）{
//在此塊中的每個測試之後運行
}）;
}）
>如何測試Chai的異常？以下是一個示例：

it（'拋出錯誤'，function（）{
> Expect（function（function（）{thur new錯誤（'錯誤值'}）。to.throw（ '錯誤（'錯誤value'）;

}）;
在此示例中，傳遞的函數期望引發錯誤。投擲斷言用於斷言該功能以消息“錯誤的值”丟棄錯誤。

>
>我如何使用間諜，存根和模擬與Mocha和Chai？間諜，存根和與摩卡咖啡和柴一起模擬，您可以使用Sinon.js之類的圖書館。 sinon.js可以輕鬆地與摩卡和柴一起集成以提供這些功能。

如何使用摩卡咖啡來生成測試報告？




，尼安等等。您可以在運行測試時指定與- Reporter選項一起使用的記者。例如，Mocha -ReporterNyan。>

以上是單位使用摩卡和柴測試您的JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章！