眾所周知，代碼很容易出錯，有時即使我們知道特定的工作流程在某些情況下可以正常工作，我們也很有可能忘記其他一些情況。
簡單來說，可以說當我們手動測試代碼時，我們可能會錯過一些東西。例如，假設我們有兩個函數(shù)，func1() 和 func2()，并且我們知道 func1() 適用于以下情況我們已經在測試中定義了，但我們發(fā)現(xiàn) func2() 不起作用。然后我們修復了 func2() 但后來忘記檢查 func1() 在我們在 func2() 中進行更改后是否適用于整個流程。 這個過程可能會導致錯誤，而且這種情況很典型，會發(fā)生幾次。
現(xiàn)在，我們知道以手動方式運行測試并不是一個非常理想的選擇，因此建議除了我們可能編寫的代碼之外，還運行單獨編寫的測試。這就是所謂的自動化測試。
在本教程中，我們將探討如何在 JavaScript 中使用 Mocha 進行自動化測試。
第一步是能夠在我們的代碼中同時使用 Mocha。為此，我們可以利用 mocha.js 為我們提供的 CDN 鏈接。在本教程中，我們還將使用 Chai.js 和 Expect.js，當我們想要檢查我們可能的不同函數(shù)的確切行為時，它們可以很好地與 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 或代碼編輯器的簡單項目目錄中創(chuàng)建三個文件。
-
index.html
index.js
測試.js
您還可以使用下面所示的命令。
touch index.html index.js tests.js
登錄后復制
注意 – touch 命令可能無法在您的本地計算機上運行，??在這種情況下，請使用 vi 命令相反。
index.html
現(xiàn)在我們創(chuàng)建了所有文件，是時候編寫代碼了。打開 index.html 文件并粘貼以下行。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Automated Testing With Mocha</title>
<link 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();
登錄后復制
現(xiàn)在是時候我們編寫一些函數(shù)來以自動化方式使用 Mocha 測試它們了。考慮下面所示的 index.js 代碼。
function addNumbers(a, b) {
return a + b;
}
登錄后復制
上面的函數(shù)是一個非常簡單的函數(shù)，其中我們有兩個參數(shù)，然后在響應中簡單地返回這兩個數(shù)字的和。
測試.js
現(xiàn)在到了有趣的部分，我們將借助自動化測試來測試上述功能是否按預期工作。考慮如下所示的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 文件。
此外，我們正在使用 describe 函數(shù)，其中我們傳遞的第一個參數(shù)是我們選擇的字符串。接下來，我們創(chuàng)建一個匿名函數(shù)，在其中調用 it() 函數(shù)，該函數(shù)又將字符串作為第一個參數(shù)，將匿名箭頭函數(shù)作為第二個參數(shù)。
我們正在使用expect函數(shù)，其中我們調用我們想要測試的實際函數(shù)作為參數(shù)，然后使用deep.equal()方法檢查是否相等。
輸出
運行 HTML 代碼并在瀏覽器中打開代碼后，一切都應該按預期工作。您應該會在瀏覽器中看到打印的文本，有點類似于下面顯示的內容。
>addNumbers should be able to add two numbers and give proper result
登錄后復制
讓我們添加第二個函數(shù)
在上面的示例中，我們測試了一個名為 addNumbers 的簡單 JavaScript 函數(shù)。現(xiàn)在，讓我們嘗試添加另一個函數(shù)，但這一次，我們將使用箭頭函數(shù)。考慮下面所示的代碼。
index.js
let multiplyNumber = (a, b) => {
return a * b;
}
登錄后復制登錄后復制
測試.js
現(xiàn)在，讓我們在 tests.js 文件中為上述函數(shù)編寫一個自動化測試。考慮下面顯示的代碼片段。
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 代碼，這次您將在瀏覽器中獲得這兩個函數(shù)的名稱。
addNumbers should be able to add two numbers and give proper result? multiplyNumber should be able to multiply two numbers and give proper result
登錄后復制
如果函數(shù)沒有返回預期輸出怎么辦？
在我們?yōu)槠渚帉懽詣踊瘻y試的兩個函數(shù)中，我們實際上期望得到正確的值。如果我們更改函數(shù)的核心邏輯以返回錯誤值怎么辦？
考慮 index.js 文件中存在一個名為 multiplyNumber 的函數(shù)。讓我們對函數(shù)進行更改，以便它不會給出我們預期的輸出。
乘數(shù)
let multiplyNumber = (a, b) => {
return a * b;
}
登錄后復制登錄后復制
輸出
現(xiàn)在，如果我們在瀏覽器中運行 HTML 代碼，我們將在瀏覽器中得到以下輸出。
multiplyNumber should be able to multiply two numbers and give proper result? AssertionError: expected 0.3333333333333333 to deeply equal 3
登錄后復制
使用多個描述函數(shù)進行自動化測試
在上面的兩個示例中，我們使用了單個 describe 函數(shù)和簡單函數(shù)。現(xiàn)在假設我們想要使用一個函數(shù)來計算數(shù)字的冪。
考慮下面所示的index.js代碼
function power(x, n) {
let res = 1;
for (let i = 0; i < n; i++) {
res *= x;
}
return res;
}
登錄后復制
在上面的函數(shù)中，我們采用兩個參數(shù)，然后將一個數(shù)字的冪提高到 n 倍。
測試.js
現(xiàn)在讓我們?yōu)榇撕瘮?shù)編寫一個自動化測試。
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);
}
});
});
登錄后復制
我們可以看到，在自動化測試函數(shù)中，我們使用了嵌套的describe函數(shù)。在這里，我們檢查在 index.js 中編寫的 power() 函數(shù)是否按預期工作。
輸出
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 中執(zhí)行自動化測試。
以上就是使用 Mocha.js 進行自動化 Javascript 測試的詳細內容，更多請關注www.92cms.cn其它相關文章！
