Menü

Jest Tutorial - Testen von JavaScript-Einheiten mit Jest Framework

  • Haupt
  • Andere
  • Jest Tutorial - Testen von JavaScript-Einheiten mit Jest Framework

jest tutorial javascript unit testing using jest framework

Versuchen Sie Unser Instrument, Um Probleme Zu Beseitigen

In diesem Jest-Tutorial erfahren Sie mehr über verschiedene Jest-Funktionen, Jest Matcher und die Verwendung des Jest-Frameworks für JavaScript-Unit-Tests:

Jest ist ein von Facebook entwickeltes Javascript-Test-Framework.

Es wurde hauptsächlich für React-basierte Apps (die ebenfalls von Facebook entwickelt wurden) entwickelt, kann jedoch zum Schreiben von Automatisierungsszenarien für alle Javascript-basierten Codebasen verwendet werden.

In diesem Jest-Test-Tutorial lernen wir verschiedene Funktionen von Jest und seinen Matchern kennen und sehen, wie wir Jest anhand eines End-to-End-Beispiels verwenden können. Wir werden auch die Codeabdeckung mit Jest untersuchen.

Es gibt ein Tutorial

Liste der Tutorials in dieser JEST-Reihe

Tutorial Nr. 1: Jest Tutorial - Testen von JavaScript-Einheiten mit Jest Framework
Tutorial # 2: So testen Sie React Apps mit Jest Framework
Tutorial # 3: Jest-Konfiguration und Debuggen von Jest-basierten Tests

Was du lernen wirst:

Erste Schritte mit Scherztests

Einige der Vorteile / Merkmale von Jest sind nachstehend aufgeführt:

  1. Keine Konfiguration erforderlich.
  2. Schnell: Scherztests werden parallel ausgeführt - dies reduziert die Testausführungszeit erheblich.
  3. Integrierte Codeabdeckung: Jest unterstützt die sofortige Codeabdeckung - dies ist eine sehr nützliche Metrik für alle CI-basierten Lieferpipelines und die allgemeine Testeffektivität eines Projekts.
  4. Isolierte und Sandkastentests: Jeder Jest-Test wird in einer eigenen Sandbox ausgeführt, wodurch sichergestellt wird, dass sich keine zwei Tests gegenseitig stören oder beeinflussen können.
  5. Leistungsstarke Mocking-Unterstützung: Scherztests unterstützen alle Arten von Verspottungen - sei es funktionale Verspottung, Timer-Verspottung oder Verspottung einzelner API-Aufrufe.
  6. Snapshot-Tests unterstützen: Schnappschusstests sind aus der Sicht von React relevant. Jest unterstützt die Erfassung eines Schnappschusses der zu testenden Reaktionskomponente. Dies kann anhand der tatsächlichen Ausgabe der Komponente überprüft werden. Dies ist sehr hilfreich bei der Überprüfung des Verhaltens der Komponente.

Jest Framework für JavaScript Unit Testing

In diesem Abschnitt sehen wir ein End-to-End-Beispiel zum Schreiben von Tests mit dem JEST-Framework für eine einfache Javascript-Funktion. Lassen Sie uns zunächst sehen, wie Sie das JEST-Framework in unserem Projekt installieren

IS-Installation

Jest ist einfach ein Knotenpaket und kann mit jedem knotenbasierten Paketmanager installiert werden. Beispiel, npm oder Garn.

Sehen wir uns einige Beispielbefehle an, mit denen das Jest-Paket installiert werden kann.

yarn add --dev jest npm install --save-dev jest

Um das Jest-Modul global zu installieren, können Sie einfach das Flag '-g' zusammen mit dem Befehl 'npm' verwenden. Auf diese Weise können Sie Jest-Befehle direkt verwenden, ohne die Paketdatei für npm-Tests zu konfigurieren.

npm install -g jest

Verwenden von Jest in einem knotenbasierten Projekt

Um Jest in einem knotenbasierten Projekt zu verwenden, verwenden Sie einfach die Befehle aus dem obigen Abschnitt, um das Knotenpaket für Jest zu installieren.

Führen Sie die folgenden Schritte aus, um von Anfang an ein Knotenprojekt zu erstellen und Jest darin zu installieren.

# 1) Erstellen Sie einen Ordner / ein Verzeichnis mit einem Namen als Projektnamen. zum Beispiel , myFirstNodeProject

#zwei) Navigieren Sie nun über das Terminal oder die Befehlszeile zu dem im obigen Schritt erstellten Projekt und führen Sie das Skript npm init mit dem folgenden Befehl aus.

npm init

#3) Sobald der obige Befehl ausgeführt wurde, werden verschiedene Fragen / Parameter abgefragt.

Zum Beispiel , den Namen des Projekts, die Version usw. Drücken Sie einfach die Eingabetaste (und akzeptieren Sie die Standardwerte). Nach Abschluss sehen Sie eine package.json-Datei, die in Ihrem Projekt erstellt wurde. Dies ist eine obligatorische Konfigurationsdatei für jedes knotenbasierte Projekt

# 4) Führen Sie nun den Befehl aus, um das Jest-Paket mit dem folgenden Befehl in das neu erstellte Projekt zu installieren.

npm install --save-dev jest

Dadurch wird das Jest-Modul (sowie seine Abhängigkeiten) installiert.

# 5) Jetzt haben wir ein Knotenprojekt mit Jest-Bindungen bereit. Konfigurieren Sie das npm-Testskript für die Ausführung der Jest-Tests, d. H. Wenn der Befehl 'npm test' ausgeführt wird, sollte das Skript alle auf dem Jest-Framework basierenden Tests ausführen.

Aktualisieren Sie dazu die Datei package.json und fügen Sie einen Skriptabschnitt hinzu, wie unten gezeigt.

'scripts': { 'test': 'jest' }

Die endgültige Datei package.json sieht wie folgt aus.

{ 'name': 'jest-e2e', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'jest' }, 'author': '', 'license': 'ISC', 'dependencies': { 'jest': '^25.1.0' } }

Schreiben von Tests für eine Javascript-Funktion

In diesem Abschnitt erstellen wir einen einfachen Javascript-Funktionscode zum Addieren, Subtrahieren und Multiplizieren von 2 Zahlen und schreiben die entsprechenden Jest-basierten Tests dafür.

Lassen Sie uns zunächst sehen, wie der Code für unsere getestete Anwendung (oder Funktion) aussieht.

# 1) Erstellen Sie in dem im obigen Abschnitt erstellten Knotenprojekt eine js-Datei mit dem Namen calculator.js mit dem unten gezeigten Inhalt

const mathOperations = { sum: function(a,b) { return a + b; }, diff: function(a,b) { return a - b; }, product: function(a,b) { return a * b } } module.exports = mathOperations

#zwei) Erstellen Sie nun für diese Tests eine Testdatei mit demselben Namen im selben Ordner calculator.test.js - Dies ist die Konvention, die vom Jest-Framework erwartet wird, um nach allen Dateien zu suchen, die Jest-basierte Tests enthalten. Wir werden auch die zu testende Funktion importieren, um den Code im Test auszuführen.

So würde die Datei aussehen, wenn nur eine Deklaration importiert / erforderlich wäre.

const mathOperations = require('./calculator');

#3) Schreiben wir nun Tests für verschiedene Methoden in die Hauptdatei, d. H. Summe, Diff und Produkt.

Scherztests folgen Tests im BDD-Stil, wobei jede Testsuite einen Hauptbeschreibungsblock hat und mehrere Testblöcke haben kann. Beachten Sie außerdem, dass die Tests auch verschachtelte Beschreibungsblöcke enthalten können.

Schreiben wir einen Test zum Hinzufügen von 2 Zahlen und validieren die erwarteten Ergebnisse. Wir werden die Zahlen als 1 & 2 liefern und die Ausgabe als 3 erwarten.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { expect(mathOperations.sum(1, 2)).toBe(3); }); })

Bitte beachten Sie die folgenden Punkte bei dem obigen Test:

zu) Der Beschreibungsblock ist eine äußere Beschreibung für die Testsuite, d. H. Er stellt einen generischen Container für alle Tests dar, die wir für den Taschenrechner in dieser Datei schreiben werden.

b) Als nächstes haben wir einen einzelnen Testblock - dies ist ein einzelner Test. Die Zeichenfolge in Anführungszeichen steht für den Namen des Tests.

c) Beziehen Sie sich auf den Code im Expect-Block - 'Expect' ist nichts anderes als eine Behauptung. Die Anweisung ruft die Summenmethode in der zu testenden Funktion mit den Eingaben 1 und 2 auf und erwartet, dass die Ausgabe 3 ist.

Wir können dies auch einfacher umschreiben, um es besser zu verstehen.

Siehe unten, jetzt haben wir den Funktionsaufruf und die Zusicherung als zwei separate Anweisungen getrennt, um sie prägnanter zu gestalten.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); })

d) Um diesen Test auszuführen, führen Sie einfach den Befehl „ Test über dem Meeresspiegel ”Im Terminal oder an der Eingabeaufforderung am Projektstandort.

Sie sehen die Ausgabe wie unten gezeigt.

Führen Sie den Befehl

# 4) Probieren wir noch einige Tests aus.

zu) Schreiben Sie zuerst einen fehlgeschlagenen Test und sehen Sie, welche Ausgabe wir erhalten. Ändern wir das Ergebnis im selben Test, den wir im letzten Abschnitt geschrieben haben, einfach in einen falschen Wert. Sehen Sie, wie der Test aussieht.

describe('Calculator tests', () => { test('adding 1 + 2 should return 10', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(10); }); })

Hier erwarten wir, dass eine Summe von 1 und 2 10 zurückgibt, was falsch ist.

Versuchen wir dies auszuführen und sehen, was wir bekommen.

detaillierte Ausgabe, wenn ein Test fehlschlägt

Sie können die detaillierte Ausgabe sehen, wenn ein Test fehlgeschlagen ist, d. H. Was tatsächlich zurückgegeben wurde und was erwartet wurde und welche Zeile den Fehler in der zu testenden Funktion usw. verursacht hat.

b) Schreiben wir weitere Tests für die anderen Funktionen, d. H. Unterschied und Produkt.

Die Testdatei mit allen Tests sieht wie folgt aus.

const mathOperations = require('./calculator'); describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); test('subtracting 2 from 10 should return 8', () => { // arrange and act var result = mathOperations.diff(10,2) // assert expect(result).toBe(8); }); test('multiplying 2 and 8 should return 16', () => { // arrange and act var result = mathOperations.product(2,8) // assert expect(result).toBe(16); }); })

Wenn die obigen Tests ausgeführt werden, Die unten angegebene Ausgabe wird generiert.

Testet die Ausgabe auf Funktionen - Differenz und Produkt

Video-Tutorial: Was ist Scherz?

Es gibt Matcher

Jest Assertions verwenden Matcher, um eine Bedingung zu bestätigen. Jest verwendet Matcher aus der erwarteten Api. Auf das erwartete API-Dokument kann verwiesen werden Hier.

Lassen Sie uns einige der am häufigsten verwendeten Matcher zusammen mit Scherztests durchgehen.

# 1) Gleichheit

Dies sind die am häufigsten verwendeten Matcher. Sie werden zur Überprüfung von Gleichheit oder Ungleichheit verwendet und werden hauptsächlich für arithmetische Operationen verwendet.

Nachfolgend einige Beispiele:

Hier haben wir 2 Matcher mit toBe und not.toBe geschrieben, die analog zu gleich und nicht gleich sind.

test('equality matchers', () => { expect(2*2).toBe(4); expect(4-2).not.toBe(1); })

# 2) Wahrhaftigkeit

Hier werden wir Matcher für Null, Falsch und Wahr, d. H. Falsche und Wahrheitswerte, sehen. Es ist wichtig zu beachten, dass alles, was logisch nicht stimmt, falsch ist.

c ++ Interview Fragen und Antworten für erfahrene

Beispielsweise, Nummer 0, Null, leere Zeichenfolge, NaN sind Beispiele für Falschheit mit Javascript.

test('truthy operators', () => { var name='Software testing help' var n = null expect(n).toBeNull() expect(name).not.toBeNull // name has a valid value expect(name).toBeTruthy() //fail - as null is non success expect(n).toBeTruthy() // pass - null treated as false or negative expect(n).toBeFalsy() // 0 - treated as false expect(0).toBeFalsy() })

# 3) Number Matchers

Diese Matcher könnten für allgemeine arithmetische Operationen verwendet werden.

Beispielsweise, größer als, kleiner als, größer als gleich usw.

Überprüfen Sie die folgenden Beispiele für weitere Details

test('numeric operators', () => { var num1 = 100; var num2 = -20; var num3 = 0; // greater than expect(num1).toBeGreaterThan(10) // less than or equal expect(num2).toBeLessThanOrEqual(0) // greater than or equal expect(num3).toBeGreaterThanOrEqual(0) })

# 4) String Matcher

Oft benötigen wir Zeichenfolgen, die einem regulären Ausdruck als Behauptung in einem Unit-Test entsprechen. Jest bietet Matcher für Zeichenfolgen, die mit einem regulären Ausdruck abgeglichen werden sollen.

test('string matchers',() => { var string1 = 'software testing help - a great resource for testers' // test for success match expect(string1).toMatch(/test/); // test for failure match expect(string1).not.toMatch(/abc/) })

Video-Tutorial: Es gibt Matcher

Scherzhaken - Aufbau und Abbau

Wie alle anderen xUnit-basierten Unit-Test-Frameworks bietet auch das Jest-Framework Hooks für Setup- und Bereinigungsmethoden. Diese Hook-Methoden werden vor und nach jedem Test in der Testsuite oder vor und nach der Ausführung von testSuite ausgeführt.

Insgesamt stehen 4 Haken zur Verfügung.

  • vor jedem und nach jedem: Diese Hooks werden vor und nach jedem Test in der Testsuite ausgeführt.
  • vor und nach: Diese Hooks werden für jede Testsuite nur einmal ausgeführt. d.h. wenn eine Testsuite 10 Tests hat, werden diese Hooks nur einmal für jede Testausführung ausgeführt.

Sehen wir uns ein Beispiel an: Wir werden diese Hooks zum gleichen Testbeispiel hinzufügen, in dem 2 Zahlen hinzugefügt werden.

Wir werden die Eingaben vor jedem Hook zur Veranschaulichung einstellen. Die Testdatei würde mit Test-Hooks wie unten gezeigt aussehen.

describe('Calculator tests', () => { var input1 = 0 var input2 = 0 beforeAll(() => { console.log('beforeAll called'); }); afterAll(() => { console.log('afterAll called'); }); beforeEach(() => { console.log('beforeEach called'); input1 = 1; input2 = 2; }); afterEach(() => { console.log('afterEach called'); }); test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(input1,input2) // assert expect(result).toBe(3); }); })

Tipps

# 1) Die Befehlszeilenberichte sind gut, aber nicht gut lesbar. Es stehen Bibliotheken / Module zur Verfügung, um HTML-basierte Testberichte für Jest-Tests zu generieren. Dies kann wie unten gezeigt erreicht werden.

  • Fügen Sie mit dem folgenden Befehl ein Knotenpaket für jest-html-reporter hinzu.
npm install --save-dev jest-html-reporter
  • Fügen Sie nun die Jest-Konfiguration für den Reporter in die Datei package.json des Knotenprojekts ein.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • Führen Sie die jetzt konfigurierten Tests mit dem Befehl „ Test über dem Meeresspiegel ' Befehl.
  • Wenn die Einrichtung erfolgreich ist, sollte im Projektverzeichnis ein HTML-basierter Bericht angezeigt werden.

Testbericht

# 2) Erstellen eines Code-Abdeckungsberichts: Die Codeabdeckung ist aus Sicht der Komponententests eine der wichtigsten Metriken. Es misst im Wesentlichen, wie viel Prozent der Aussagen / Zweige für die zu prüfende Anwendung abgedeckt sind.

Jest bietet sofort Unterstützung für die Codeabdeckung. Um den Jest-Bericht zu erhalten, Es gibt eine Konfiguration muss in der hinzugefügt werden package.json Datei.

Fügen Sie die Konfiguration wie unten gezeigt hinzu:

'jest': { 'collectCoverage':true }

Versuchen Sie nach Abschluss dieser Konfiguration, die Tests mit dem Befehl auszuführen 'Über dem Meeresspiegel Test' , und du kannst Weitere Informationen finden Sie in den Details zur Codeabdeckung direkt unter den Ergebnissen der Testausführung (siehe unten).

Details zur Codeabdeckung

Video-Tutorial: Scherzberichterstattung und Erstellung von HTML-Berichten

Fazit

In diesem Jest-Tutorial haben wir die Grundlagen des Jest-Frameworks erläutert. Wir haben gelernt, wie das Jest-Framework installiert wird, und haben gesehen, wie es zum Testen einfacher Javascript-Dateien verwendet werden kann.

Wir haben auch die verschiedenen Arten von Matchern untersucht, die von Jest unterstützt werden, und auch HTML-Reporter und Berichte zur Codeabdeckung behandelt.

NÄCHSTES Tutorial

Literatur-Empfehlungen

^