众所周知，代码很容易出错，有时即使我们知道特定的工作流程在某些情况下可以正常工作，我们也很有可能忘记其他一些情况。
简单来说，可以说当我们手动测试代码时，我们可能会错过一些东西。例如，假设我们有两个函数，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< 中存在的 CDN 链接提供给我们的。 /b> 文件。
此外，我们正在使用 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中文网其他相关文章！
