使用 Mocha.js 進行自動化 Javascript 測試
- WBOY轉載
- 2023-09-14 10:41:021291瀏覽
眾所周知，程式碼很容易出錯，有時即使我們知道特定的工作流程在某些情況下可以正常運作，我們也很有可能忘記其他一些情況。
簡單來說，可以說當我們手動測試程式碼時，我們可能會錯過一些東西。例如，假設我們有兩個函數，func1() 和func2()，並且我們知道func1() 適用於以下情況我們已經在測試中定義了，但我們發現func2() 不起作用。然後我們修復了 func2() 但後來忘記檢查 func1() 在我們在 func2() 中進行更改後是否適用於整個流程。 這個過程可能會導致錯誤，而且這種情況很典型，會發生幾次。
現在，我們知道以手動方式執行測試並不是一個非常理想的選擇，因此建議除了我們可能編寫的程式碼之外，還要執行單獨編寫的測試。這就是所謂的自動化測試。
在本教程中，我們將探討如何在 JavaScript 中使用 Mocha 進行自動化測試。
第一步是能夠在我們的程式碼中同時使用 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
- 測試.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;
}
上面的函數是一個非常簡單的函數，其中我們有兩個參數，然後在回應中簡單地傳回這兩個數字的和。
測試.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 檔案。
此外，我們正在使用 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;
}
測試.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 的函数。让我们对函数进行更改，以便它不会给出我们预期的输出。
乘数
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 函数和简单函数。现在假设我们想要使用一个函数来计算数字的幂。
考虑下面所示的index.js代码
function power(x, n) {
let res = 1;
for (let i = 0; i < n; i++) {
res *= x;
}
return res;
}
在上面的函数中，我们采用两个参数，然后将一个数字的幂提高到 n 倍。
测试.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 中执行自动化测试。
以上是使用 Mocha.js 進行自動化 Javascript 測試的詳細內容。更多資訊請關注PHP中文網其他相關文章！