首頁 > 文章 > web前端 > 使用 Mocha.js 進行自動化 Javascript 測試

使用 Mocha.js 進行自動化 Javascript 測試

WBOY轉載: 2023-09-14 10:41:021208瀏覽

使用 Mocha.js 进行自动化 Javascript 测试

眾所周知，程式碼很容易出錯，有時即使我們知道特定的工作流程在某些情況下可以正常運作，我們也很有可能忘記其他一些情況。

簡單來說，可以說當我們手動測試程式碼時，我們可能會錯過一些東西。例如，假設我們有兩個函數，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中文網其他相關文章！

JavaScript html 字符串 JS ide 自动化

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：使用 JavaScript 和 Electron.js 建立桌面 GUI 應用程式下一篇：使用 JavaScript 和 Electron.js 建立桌面 GUI 應用程式

看更多