Heim > Artikel > Web-Frontend > Automatisierte Javascript-Tests mit Mocha.js
Automatisierte Javascript-Tests mit Mocha.js
- WBOYnach vorne
- 2023-09-14 10:41:021208Durchsuche
Wir alle wissen, dass Code fehleranfällig ist, und manchmal vergessen wir andere eher, selbst wenn wir wissen, dass ein bestimmter Workflow in einigen Fällen gut funktioniert.
Einfach ausgedrückt kann man sagen, dass wir beim manuellen Testen des Codes möglicherweise etwas übersehen. Nehmen wir zum Beispiel an, wir haben zwei Funktionen, func1() und func2(), und wir wissen, dass func1() funktioniert, wenn wir es im Test definiert haben, aber wir finden, dass func2() springt nicht an. Dann haben wir func2() repariert, aber dann vergessen zu prüfen, ob func1() auf den gesamten Prozess zutrifft, nachdem wir die Änderung in func2() vorgenommen haben. Dieser Vorgang kann zu Fehlern führen und kommt in der Regel einige Male vor.
Jetzt wissen wir, dass das manuelle Ausführen von Tests keine sehr ideale Option ist. Daher wird empfohlen, zusätzlich zu dem Code, den wir möglicherweise geschrieben haben, separat geschriebene Tests auszuführen. Dies wird als automatisiertes Testen bezeichnet.
In diesem Tutorial erfahren Sie, wie Sie Mocha in JavaScript für automatisierte Tests verwenden.
Der erste Schritt besteht darin, Mocha gleichzeitig in unserem Code verwenden zu können. Dazu können wir den CDN-Link nutzen, den uns mocha.js zur Verfügung stellt. In diesem Tutorial verwenden wir auch Chai.js und Expect.js, die gut mit Mocha funktionieren, wenn wir das genaue Verhalten unserer möglichen verschiedenen Funktionen überprüfen möchten. Geschrieben.
Hier finden Sie alle CDNs, die Sie in Ihre index.html-Datei importieren müssen.
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
Der nächste Schritt besteht darin, drei Dateien im einfachen Projektverzeichnis Ihrer bevorzugten IDE oder Ihres bevorzugten Code-Editors zu erstellen.
- index.html
- index.js
- test.js
Sie können auch den unten gezeigten Befehl verwenden.
touch index.html index.js tests.js
HINWEIS – Der Befehl touch wird möglicherweise nicht auf Ihrem lokalen Computer ausgeführt. Verwenden Sie in diesem Fall bitte stattdessen den Befehl vi.
index.html
Da wir nun alle Dateien erstellt haben, ist es an der Zeit, den Code zu schreiben. Öffnen Sie die Datei index.html und fügen Sie die folgenden Zeilen ein.
Beispiel
<!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>
Anleitung
Im obigen HTML-Code habe ich alle Abhängigkeiten über CDN importiert, z. B. Mocha, Chai und Expect.
Ich habe dann zwei verschiedene js-Dateien in synchroner Reihenfolge importiert, nämlich index.js und tests.js, was bedeutet, dass zuerst die index.js-Datei ausgeführt wurde, dann ein Skript, das window.mocha festlegt () und bdd.
Bedenken Sie den unten gezeigten Codeausschnitt.
const mocha = window.mocha;
mocha.setup('bdd');
Nach dem obigen Code rufe ich die Datei tests.js auf und rufe dann verschiedene Methoden von Mocha auf. Betrachten Sie den unten gezeigten Codeausschnitt.
mocha.checkLeaks(); mocha.run();
Jetzt ist es für uns an der Zeit, einige Funktionen zu schreiben, um sie automatisiert mit Mocha zu testen. Betrachten Sie den unten gezeigten index.js-Code.
function addNumbers(a, b) {
return a + b;
}
Die obige Funktion ist eine sehr einfache Funktion, bei der wir zwei Parameter nehmen und dann einfach die Summe dieser beiden Zahlen in der Antwort zurückgeben.
test.js
Jetzt kommt der spaßige Teil: Wir testen mithilfe automatisierter Tests, ob die oben genannte Funktionalität wie erwartet funktioniert. Betrachten Sie den unten gezeigten Tests.js-Code.
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)
})
})
Im obigen Code habe ich die Pakete Chai und Expect über die Datei index.html importiert.
Außerdem verwenden wir die Funktion describe, bei der das erste Argument, das wir übergeben, eine Zeichenfolge unserer Wahl ist. Als nächstes erstellen wir eine anonyme Funktion, in der wir die Funktion it() aufrufen, die wiederum einen String als ersten Parameter und eine anonyme Pfeilfunktion als zweiten Parameter akzeptiert.
Wir verwenden die Funktion expect, bei der wir die tatsächliche Funktion, die wir testen möchten, als Parameter aufrufen und dann mit der Methode deep.equal() auf Gleichheit prüfen.
Ausgabe
Nachdem Sie den HTML-Code ausgeführt und in Ihrem Browser geöffnet haben, sollte alles wie erwartet funktionieren. In Ihrem Browser sollte ein Text angezeigt werden, der dem unten dargestellten ähnelt.
>addNumbers should be able to add two numbers and give proper result
Fügen wir eine zweite Funktion hinzu
Im obigen Beispiel haben wir eine einfache JavaScript-Funktion namens addNumbers getestet. Jetzt versuchen wir, eine weitere Funktion hinzuzufügen, aber dieses Mal verwenden wir die Pfeilfunktion. Betrachten Sie den unten gezeigten Code.
index.js
let multiplyNumber = (a, b) => {
return a * b;
}
test.js
Jetzt schreiben wir einen automatisierten Test für die obige Funktion in die Datei tests.js. Betrachten Sie den unten gezeigten Codeausschnitt.
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)
})
})
Ausgabe
Führen Sie den HTML-Code aus und dieses Mal erhalten Sie die Namen dieser beiden Funktionen im Browser.
addNumbers should be able to add two numbers and give proper result‣ multiplyNumber should be able to multiply two numbers and give proper result
Was passiert, wenn die Funktion nicht die erwartete Ausgabe zurückgibt?
In den beiden Funktionen, für die wir automatisierte Tests geschrieben haben, haben wir tatsächlich erwartet, die richtigen Werte zu erhalten. Was passiert, wenn wir die Kernlogik der Funktion ändern, um einen Fehlerwert zurückzugeben?
考虑 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 中执行自动化测试。
Das obige ist der detaillierte Inhalt vonAutomatisierte Javascript-Tests mit Mocha.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!