Unit testen Sie Ihr JavaScript mit Mocha und Chai

unten:

<!-- load your test files here -->

Sobald Sie das Skript hinzugefügt haben, können Sie die Seite Testläufer in Ihrem Browser der Wahl laden.

Die Testergebnisse

Wenn Sie Ihre Tests ausführen, sehen die Testergebnisse ungefähr so ​​aus:

Beachten Sie, dass das, was wir in die Beschreibung eingegeben haben, und IT -Funktionen in der Ausgabe angezeigt werden - die Tests werden unter der Beschreibung gruppiert. Beachten Sie, dass es auch möglich ist, Nist zu beschreiben, um weitere Untergruppen zu erstellen.

Schauen wir uns an, wie ein fehlender Test aussieht.

Auf der Linie im Test mit der Aufschrift:

assert.equal(arr.length, 0);

Ersetzen Sie die Nummer 0 durch 1. Dies macht den Test fehl, da die Länge des Arrays nicht mehr mit dem erwarteten Wert übereinstimmt.

Wenn Sie die Tests erneut ausführen, sehen Sie den fehlenden Test rot mit einer Beschreibung dessen, was schief gelaufen ist.

Einer der Vorteile von Tests besteht darin, dass sie Ihnen helfen, Fehler schneller zu finden. Dieser Fehler ist jedoch in dieser Hinsicht nicht sehr hilfreich. Wir können es aber beheben.

Die meisten Behauptungsfunktionen können auch einen optionalen Meldungsparameter erfolgen. Dies ist die Nachricht, die angezeigt wird, wenn die Behauptung fehlschlägt. Es ist eine gute Idee, diesen Parameter zu verwenden, um die Fehlermeldung zu verstehen.

Wir können unserer Behauptung wie SO eine Nachricht hinzufügen:

assert.equal(arr.length, 1, 'Array length was not 0');

Wenn Sie Tests erneut ausführen, wird die benutzerdefinierte Nachricht anstelle der Standardeinstellung angezeigt.

Lassen Sie uns die Behauptung wieder auf die Art und Weise wechseln - ersetzen Sie 1 durch 0 und führen Sie die Tests erneut durch, um sicherzustellen, dass sie bestehen.

zusammenstellen

Bisher haben wir uns ziemlich einfache Beispiele angesehen. Lassen Sie uns das, was wir gelernt haben, in die Praxis umsetzen und sehen, wie wir einen realistischeren Code testen würden.

Hier ist eine Funktion, die einem Element eine CSS -Klasse hinzufügt. Dies sollte in einer neuen Datei js/className.js.

gehen

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

Um es ein bisschen interessanter zu machen, habe ich es nur dann eine neue Klasse hinzufügen, wenn diese Klasse in der Klassenname eines Elements nicht existiert - wer möchte schließlich

sehen?

Im besten Fall schreiben wir Tests für diese Funktion , bevor wir den Code schreiben. Die testgetriebene Entwicklung ist jedoch ein komplexes Thema, und im Moment möchten wir uns nur auf das Schreiben von Tests konzentrieren.

Um loszulegen, erinnern wir uns an die Grundidee hinter Unit -Tests: Wir geben der Funktion bestimmte Eingänge an und verifizieren dann die Funktion wie erwartet. Was sind die Eingaben und Verhaltensweisen für diese Funktion?

ein Element und einen Klassennamen angegeben:

• Wenn die Eigenschaft des Elements nicht den Klassennamen enthält, sollte er hinzugefügt werden.
• Wenn die Klasse des Elements den Klassennamen enthält, sollte es nicht hinzugefügt werden.

Lassen Sie uns diese Fälle in zwei Tests umsetzen. Erstellen Sie im Testverzeichnis eine neue Datei classnametest.js und fügen Sie Folgendes hinzu:

<!-- load your test files here -->

Wir haben den Wortlaut leicht in das mit Tests verwendete Formular „Es sollte X“ geändert. Dies bedeutet, dass es etwas schöner liest, aber im Wesentlichen immer noch die gleiche menschlich-lesbare Form ist, die wir oben aufgeführt haben. Es ist normalerweise nicht viel schwieriger als diese, von Idee zu Test zu werden.

Aber warte, wo sind die Testfunktionen? Nun, wenn wir den zweiten Parameter weglassen, markiert Mokka diese Tests in den Testergebnissen als ausstehend . Dies ist eine bequeme Möglichkeit, eine Reihe von Tests einzurichten - ähnlich wie eine Todo -Liste dessen, was Sie schreiben möchten.

Lassen Sie uns den ersten Test implementieren.

assert.equal(arr.length, 0);

In diesem Test erstellen wir eine Elementvariable und übergeben sie zusammen mit einer String-Testklasse (die neue Klasse zum Hinzufügen) als Parameter. Dann überprüfen wir, dass die Klasse mit einer Behauptung im Wert enthalten ist.

Wiederum gingen wir von unserer ersten Idee - angesichts eines Elements und eines Klassennamens, es sollte in die Klassenliste hinzugefügt werden - und es in ziemlich einfacher Weise in Code übersetzt.

Obwohl diese Funktion so konzipiert ist, dass sie mit DOM -Elementen funktioniert, verwenden wir hier ein einfaches JS -Objekt. Manchmal können wir die dynamische Natur von JavaScript auf diese Weise nutzen, um unsere Tests zu vereinfachen. Wenn wir dies nicht tun würden, müssten wir ein tatsächliches Element erstellen, und es würde unseren Testcode komplizieren. Als zusätzlicher Vorteil, da wir DOM nicht verwenden, können wir diesen Test auch innerhalb von Node.js ausführen, wenn wir dies wünschen.

Ausführen der Tests im Browser

Um den Test im Browser auszuführen, müssen Sie dem Läufer className.js und classnametest.js hinzufügen:

assert.equal(arr.length, 1, 'Array length was not 0');

Sie sollten nun einen Testpass sehen und ein weiterer Test wird als ausstehend angezeigt, wie der folgende CodePen zeigt. Beachten Sie, dass sich der Code geringfügig vom Beispiel unterscheidet, damit der Code in der CodePen -Umgebung funktioniert.

Siehe die Stifteinheitstests mit Mokka (1) von sitepoint (@sinepoint) auf CodePen.

Im nächsten Mal implementieren wir den zweiten Test…

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

Es ist eine gute Angewohnheit, Ihre Tests häufig durchzuführen. Überprüfen Sie, was passiert, wenn wir die Tests jetzt durchführen. Wie erwartet sollten sie passieren.

Hier ist ein weiterer Codepen mit dem zweiten Test.

Siehe die Stifteinheitstests mit Mokka (2) von sitepoint (@sinepoint) auf CodePen.

Aber haltest du! Ich habe dich tatsächlich ein bisschen geschrieben. Für diese Funktion gibt es ein drittes Verhalten, das wir nicht in Betracht gezogen haben. Es gibt auch einen Fehler in der Funktion - eine ziemlich ernsthafte. Es ist nur eine Dreizeilenfunktion, aber haben Sie sie bemerkt?

Schreiben wir einen weiteren Test für das dritte Verhalten, das den Fehler als Bonus enthüllt.

<!-- load your test files here -->

Diesmal schlägt der Test fehl. Sie können es in den folgenden CodePen in Aktion sehen. Das Problem ist hier einfach: CSS -Klassennamen in Elementen sollten durch einen Raum getrennt werden. Unsere aktuelle Implementierung von AddClass fügt jedoch keinen Platz hinzu!

Siehe die Stifteinheitstests mit Mokka (3) von sitepoint (@sinepoint) auf CodePen.

Lassen Sie uns die Funktion beheben und den Test bestehen.

assert.equal(arr.length, 0);

Und hier ist ein endgültiger CodePen mit den festen Funktionen und Übergeben von Tests.

Siehe die Stifteinheitstests mit Mokka (4) von sitepoint (@sinepoint) auf CodePen.

Ausführen der Tests auf Knoten

Im Knoten sind die Dinge nur für andere Dinge in derselben Datei sichtbar. Da ClassName.js und classnametest.js in verschiedenen Dateien enthalten sind, müssen wir einen Weg finden, um einen dem anderen auszusetzen. Die Standardmethode, dies zu tun, besteht in der Verwendung von Modul.exports. Wenn Sie eine Auffrischung benötigen, können Sie hier alles darüber lesen: Modul.exports und Exporte in node.js

verstehen

Der Code bleibt im Wesentlichen gleich, ist aber etwas anders strukturiert:

assert.equal(arr.length, 1, 'Array length was not 0');

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

Und wie Sie sehen können, bestehen die Tests.

Was kommt als nächstes?

Wie Sie sehen, muss das Test nicht kompliziert oder schwierig sein. Genau wie bei anderen Aspekten des Schreibens von JavaScript -Apps haben Sie einige grundlegende Muster, die sich wiederholen. Sobald Sie sich mit diesen vertraut machen, können Sie sie immer wieder verwenden.

Aber das kratzt nur die Oberfläche. Es gibt noch viel mehr zu lernen über Unit -Tests.

• Testen komplexerer Systeme
• Wie kann man mit Ajax, Datenbanken und anderen „externen“ Dingen umgehen?
• testgetriebene Entwicklung

Wenn Sie dies und mehr lernen möchten, habe ich eine kostenlose JavaScript -Unit -Test -QuickStart -Serie erstellt. Wenn Sie diesen Artikel nützlich fanden, sollten Sie ihn auf jeden Fall hier überprüfen.

Alternativ, wenn Video mehr Ihr Stil ist, interessieren Sie sich möglicherweise für den Kurs von SitePoint Premium: testgetriebene Entwicklung in node.js.

häufig gestellte Fragen zum Testen von Unit -Tests JavaScript mit Mokka und Chai

Wie installiere ich Mocha und Chai für Unit -Tests in JavaScript? Sobald Sie diese haben, können Sie Mocha und Chai mit NPM installieren. Öffnen Sie Ihr Terminal und navigieren Sie zu Ihrem Projektverzeichnis. Führen Sie dann die folgenden Befehle aus:

npm install-Save-dev Mocha Chai

Dieser Befehl installiert Mocha und Chai als DevDependenzen für Ihr Projekt. Das Flag-Save-Dev wird verwendet, um diese als Entwicklungsabhängigkeiten in Ihrem Paket hinzuzufügen. Mit Mokka und Chai beinhaltet das Erstellen einer Testdatei und das Schreiben Ihrer Testfälle darin. Hier ist ein einfaches Beispiel:

var erwartet = require ('chai'). Erwarten;

beschreiben ('Basic Mocha String -Test', Funktion () {

it ('sollte zurückkehren Anzahl der Zeichen in einer String ', function () {

erwarten (' hello '). to.have.lengthof (5);
});
});

in Dieses Beispiel ist eine Testsuite, die Tests gruppiert, und es handelt sich um einen Testfall. Die Erwartungsfunktion von Chai wird verwendet, um die erwartete Ausgabe zu gründen.

Wie kann ich meine Mokka -Tests ausführen? Folgendes Befehl:

./ node_modules/.bin/mocha

In diesem Befehl wird die in Ihrem Ordner node_modules installierte Mokka -Binäranlage ausgeführt. Wenn Sie diesen Befehl einfach als Mocha ausführen möchten, können Sie Mocha global mit NPM installieren -g -G -Mokka installieren. Stile - sollte, erwarten und behaupten. Der Sollte -Stil erweitert jedes Objekt mit einer Soll -Eigenschaft, um Ihre Kette zu starten. Der Erwartungsstil bietet einen traditionelleren, funktionsbasierten Ansatz. Der Assert -Stil bietet eine klassische, einfache Möglichkeit, Behauptungen zu schreiben. Sie können Rückrufe, Versprechen oder Asynchronisierungen verwenden. Hier ist ein Beispiel mit Async/Auseait:

iT ('Async test', async function () {

const result = warte myaSyncfunction (); ); Das Wartenschlüsselwort wird verwendet, um auf das Versprechen zu warten, bevor er den Test fortsetzt.

Wie kann ich Hooks in Mocha verwenden? Hier ist ein Beispiel:

beschreiben ('Hooks', function () {
vor (function () {
// läuft einmal vor dem ersten Test in diesem Block
});

nach (function () {
// läuft einmal nach dem letzten Test in diesem Block
}); Jeder Test in diesem Block
});
Wie kann ich Ausnahmen mit Chai testen? Hier ist ein Beispiel:

iT ('Ein Fehler', function () {
erwarten (function () {Neuen Fehler werfen ('falscher Wert').}). Throw ('falsch Wert ');
});

In diesem Beispiel hat die Funktion, die erwartet wurde, einen Fehler ausgelöst. Die Aussage von Wurf wird verwendet, um zu behaupten, dass die Funktion einen Fehler mit der Meldung 'falscher Wert' auslöst. Spione, Stubs und Mocks mit Mokka und Chai können Sie eine Bibliothek wie Sinon.js verwenden. Sinon.js kann leicht in Mokka und Chai integriert werden, um diese Funktionen bereitzustellen.

Wie kann ich Testberichte mit Mokka erstellen? , Nyan und mehr. Sie können den Reporter mit der Option -Reporter beim Ausführen Ihrer Tests angeben. Zum Beispiel, Mocha -Reporter Nyan.

Wie kann ich meine Tests mit Chai lesbarer gestalten? Anstatt zu erwarten (myvar). To.be.true;, können Sie erwarten (myvar) .to.be.true;. Dies macht Ihre Tests natürlicher und einfacher zu verstehen.

Das obige ist der detaillierte Inhalt vonUnit testen Sie Ihr JavaScript mit Mocha und Chai. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!