資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 Mocha.js 進行自動化 JavaScript 測試
眾所周知，程式碼容易出錯，有時即使我們知道某個工作流程在某些情況下可以正常工作，但我們也有可能忘記其他一些情況。
簡單來說，可以認為當我們手動測試程式碼時，可能會遺漏一些東西。例如，假設我們有兩個函式，func1() 和 func2()，我們知道 func1() 適用於我們在測試中定義的情況，但我們發現 func2() 不起作用。然後我們修復了 func2()，但後來忘記檢查在對 func2() 進行修改後，func1() 是否在整個流程中都能正常工作。此過程可能會導致錯誤，並且這種情況經常發生。
現在，我們知道以手動方式執行測試不是一個非常理想的選擇，因此建議我們除了可能編寫的程式碼之外，還應該執行單獨編寫的測試。這就是所謂的自動化測試。
在本教程中，我們將探討如何使用 Mocha 在 JavaScript 中進行自動化測試。
第一步是能夠在我們的程式碼中使用 Mocha。為此，我們可以使用 mocha.js 提供的 CDN 連結。在本教程中，我們還將使用Chai.js 和Expect.js，當我們想要檢查可能編寫的不同函式的確切行為時，它們與 Mocha 配合得很好。
以下是您需要匯入到index.html 檔案中的所有 CDN。
Expect.js
https://cdn.rawgit.com/Automattic/expect.js/0.3.1/index.js
Chai.js
https://cdn.rawgit.com/chaijs/chai/3.5.0/chai.js
Mocha.js
https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js
下一步是在您喜歡的 IDE 或程式碼編輯器中，在簡單的專案目錄中建立三個檔案。
- index.html
- index.js
- tests.js
您也可以使用下面顯示的命令。
touch index.html index.js tests.js
注意 - touch 命令可能無法在您的本地機器上工作，在這種情況下，請改用vi 命令。
index.html
現在我們建立了所有檔案，是時候編寫程式碼了。開啟index.html 檔案並貼上以下行。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Automated Testing With Mocha</title>
<link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
</head>
<body>
<div id="mocha"></div>
<script src="https://cdn.rawgit.com/Automattic/expect.js/0.3.1/index.js"></script>
<script src="https://cdn.rawgit.com/chaijs/chai/3.5.0/chai.js"></script>
<script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
<script src="index.js"></script>
<script>
const mocha = window.mocha;
mocha.setup('bdd');
</script>
<script src="tests.js"></script>
<script>
mocha.checkLeaks();
mocha.run();
</script>
</body>
</html>
解釋
在上面的 HTML 程式碼中，我透過 CDN 匯入了所有依賴項，如Mocha、Chai 和Expect。
然後我以同步順序匯入了兩個不同的js 檔案，即index.js 和tests.js，這意味著，首先執行index.js 檔案，然後執行一個指令碼，在其中我設定了window.mocha() 和bdd。
考慮以下程式碼片段。
const mocha = window.mocha;
mocha.setup('bdd');
在上述程式碼之後，我呼叫了tests.js 檔案，然後呼叫了 Mocha 的不同方法。考慮以下程式碼片段。
mocha.checkLeaks(); mocha.run();
現在是時候編寫一些函式來以自動化方式使用 Mocha 對其進行測試了。考慮以下所示的index.js 程式碼。
function addNumbers(a, b) {
return a + b;
}
以上函式是一個非常簡單的函式，其中我們有兩個引數，然後簡單地將這兩個數字的和作為響應返回。
tests.js
現在到了有趣的部分，我們將藉助自動化測試來測試上述函式是否按預期工作。考慮以下所示的 tests.js 程式碼。
const chai = window.chai const expect = chai.expect describe('addNumbers', () => { it('should be able to add two numbers and give proper result', () => { expect(addNumbers(1, 3)).to.deep.equal(4) expect(addNumbers(1, 5)).to.deep.equal(6) expect(addNumbers(-9, -10)).to.deep.equal(-19) }) })
在上面的程式碼中，我匯入了Chai 和Expect 包，它們透過index.html 檔案中存在的 CDN 連結提供給我們。
此外，我們使用describe 函式，其中我們傳遞的第一個引數是我們選擇的字串。接下來，我們在其中呼叫it() 函式，該函式依次將字串作為第一個引數，並將匿名箭頭函式作為第二個引數。
我們使用expect 函式，其中我們將要測試的實際函式作為引數，然後使用deep.equal() 方法檢查相等性。
輸出
執行 HTML 程式碼並在瀏覽器中開啟程式碼後，一切應該都能按預期工作。您應該在瀏覽器中看到列印的文字，與下面顯示的內容類似。
>addNumbers should be able to add two numbers and give proper result
讓我們新增第二個函式
在上面的示例中，我們測試了一個名為addNumbers 的簡單 JavaScript 函式。現在，讓我們嘗試新增另一個函式，但這次我們將使用箭頭函式。考慮以下所示的程式碼。
index.js
let multiplyNumber = (a, b) => {
return a * b;
}
tests.js
現在，讓我們在tests.js 檔案中為上述函式編寫一個自動化測試。考慮以下程式碼片段。
describe('multiplyNumber', () => { it('should be able to multiply two numbers and give proper result',() => { expect(multiplyNumber(1, 3)).to.deep.equal(3) expect(multiplyNumber(1, 5)).to.deep.equal(5) expect(multiplyNumber(-9, -10)).to.deep.equal(90) }) })
輸出
執行 HTML 程式碼，這次您將在瀏覽器中獲得這兩個函式的名稱。
addNumbers should be able to add two numbers and give proper result‣ multiplyNumber should be able to multiply two numbers and give proper result
如果函式沒有返回預期的輸出會怎樣？
在我們為其編寫自動化測試的兩個函式中，我們實際上都期望獲得正確的值。如果我們更改函式的核心邏輯以返回錯誤的值會怎樣？
考慮index.js 檔案中存在的名為multiplyNumber 的函式。讓我們對該函式進行更改，使其不提供預期的輸出。
multiplyNumber
let multiplyNumber = (a, b) => {
return a * b;
}
輸出
現在，如果我們在瀏覽器中執行 HTML 程式碼，我們將在瀏覽器中獲得以下輸出。
multiplyNumber should be able to multiply two numbers and give proper result‣ AssertionError: expected 0.3333333333333333 to deeply equal 3
使用多個 Describe 函式進行自動化測試
在以上兩個示例中，我們使用了單個describe 函式和簡單的函式。現在假設我們想要使用一個函式來計算數字的冪。
考慮以下所示的index.js 程式碼
function power(x, n) {
let res = 1;
for (let i = 0; i < n; i++) {
res *= x;
}
return res;
}
在上述函式中，我們獲取兩個引數，然後將數字的冪提升到 n 次。
tests.js
現在讓我們為這個函式編寫一個自動化測試。
describe("power", function () {
describe("raises x to power 2", function () {
function checkPower(x) {
let expected = x * x;
it(`${x} in the power 2 is ${expected}`, function () {
expect(power(x, 2)).to.deep.equal(expected);
});
}
for (let x = 1; x <= 5; x++) {
checkPower(x);
}
});
});
我們可以看到，在自動化測試函式中，我們使用了巢狀的describe 函式。在這裡，我們檢查我們在index.js 中編寫的power() 函式是否按預期工作。
輸出
power raises x to power 2 1 in the power 2 is 1‣ 2 in the power 2 is 4‣ 3 in the power 2 is 9‣ 4 in the power 2 is 16‣ 5 in the power 2 is 25
結論
在本教程中，我們透過示例說明了如何使用 Mocha.js 與 Chai.js 和 Expect.js 在 JavaScript 中執行自動化測試。
291 次檢視
