Menü

Jest-Konfiguration und Debuggen von Jest-basierten Tests

  • Haupt
  • Andere
  • Jest-Konfiguration und Debuggen von Jest-basierten Tests

jest configuration debugging jest based tests

Versuchen Sie Unser Instrument, Um Probleme Zu Beseitigen

Erfahren Sie mehr über Jest Config, Debuggen und Vergleichen von Jest mit anderen JavaScript-Test-Frameworks, insbesondere Jest vs Mocha & Jest vs Jasmine:

In diesem Informative Scherzserie haben wir alles erkundet Testen Reagieren Sie Apps, Mocks und Spione mit Jest in unserem letzten Tutorial.

In diesem Tutorial erfahren Sie mehr über Jest Config-Dateien und erfahren, wie Sie Jest-Tests zur Fehlerbehebung bei einem oder mehreren Tests testen können.

Wir werden auch einige der häufig verwendeten Optionen in der Jest Config-Datei untersuchen, die unabhängig in einem Projekt eingerichtet werden können oder die als Teil der package.json-Konfiguration selbst hinzugefügt werden können.

Jest Config und Debugging

Wir werden Visual Studio Code zum Schreiben unserer Jest-Tests verwenden und eine Erweiterung oder ein Plugin in VS Code verwenden, um die Debugging-Unterstützung für Jest-Tests zu aktivieren.

Darüber hinaus werden wir die verschiedenen Javascript-Test-Frameworks wie Mocha und Jasmine mit Jest vergleichen und die Vor- und Nachteile voneinander verstehen.

Was du lernen wirst:

Es gibt Config

Die Jest-Konfiguration kann auf drei Arten angegeben werden

  • Durch einen Schlüssel in der Datei package.json.
  • Über eine jest.config.js-Datei - Konfigurationsdatei, die als Modul geschrieben wurde.
  • Über einen JSON, der mit der Option –config flag verwendet werden kann.

Mit allen oben genannten Ansätzen können Sie das gleiche Ergebnis erzielen. Sehen wir uns den ersten Schritt an - d. H. Das Hinzufügen der Jest-Konfiguration über einen Schlüssel in der Datei package.json.

Fügen Sie in der vorhandenen Datei package.json einen neuen Schlüssel mit dem Namen 'jest' hinzu. Dies ist nichts anderes als eine Reihe von Schlüssel-Wert-Paaren im JSON-Format. Alle Konfigurationsoptionen für Jest können diesem Abschnitt in der Datei package.json hinzugefügt werden.

Konfigurationsoptionen hinzufügen

Die am häufigsten verwendeten Konfigurationsoptionen sind unten aufgeführt.

# 1) Abdeckung im Zusammenhang

collectCoverage, CoverageThreshold, CoverageReporter, CoverageDirectory - Dies sind die am häufigsten verwendeten Optionen. Die Abdeckung ist eine wichtige Metrik und stellt sicher, dass der Code anhand eines voreingestellten Schwellenwerts getestet wird.

Eine detaillierte Erklärung von jedem von ihnen ist wie folgt:

# 1) collectCoverage: Diese Option wird verwendet, um anzugeben, ob der Jest-Testläufer Deckungsinformationen sammeln soll oder nicht. Bei true sammelt der Jest-Läufer die Abdeckungsinformationen. Mit dieser Option wird die Abdeckung erfasst und am Ende der Testausführung auf der Konsole angezeigt, wie unten gezeigt.

# 2) Deckungsschwelle: Mit dieser Einstellung können wir die Schwellenwerte für die Abdeckung in Prozent angeben. Dies ist sehr hilfreich, wenn die Organisation oder das Team einen bestimmten Mindestabdeckungswert einhalten möchte, ohne den kein Code in die Hauptniederlassung übertragen oder zusammengeführt werden kann.

Mal sehen, wie dies genutzt werden kann.

Die Abdeckung kann auf globaler Ebene, Dateiebene oder einem anderen regulären Ausdruck angegeben werden. Bei Angabe auf globaler Ebene sollten alle angegebenen Schwellenwerte für alle kombinierten Dateien im Projekt übereinstimmen.

'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 } }

Das Festlegen der Abdeckung auf Dateiebene ist auch möglich, indem 'global' in 'Dateiname' oder 'Regex' geändert wird. Die Schwellenwertkonfigurationen können je nach Anforderung variieren.

'coverageThreshold': { './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } }

# 3) BerichterstattungReporter: Diese Konfiguration wird verwendet, um anzugeben, welchen Reporter Sie zum Generieren des Abdeckungsberichts verwenden möchten. Es gibt viele vorhandene Reporter als NPM-Pakete, mit denen am Ende der Testausführung ein Bericht über die Berichterstattung erstellt werden kann.

# 4) AbdeckungVerzeichnis: Mit dieser Einstellung kann der Benutzer das Verzeichnis angeben, in dem die Abdeckungsberichte nach dem Erstellen gespeichert oder beibehalten werden sollen.

Im Folgenden finden Sie ein kombiniertes Beispiel für die Verwendung aller Konfigurationseinstellungen für die Abdeckung.

'jest':{ 'collectCoverage':true, 'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 }, './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } }, 'coverageReporters': ( 'lcov','text' ), 'coverageDirectory': './output/code-coverage/' }

Hier haben wir 2 Berichterstattungsreporter verwendet, d. H. Lcov und text.Lcov ist die Linux-Zeilenabdeckung und standardmäßig vorhanden. Der Textberichter bedeutet, dass die Berichterstattungsausgabe auch auf der Konsole angezeigt wird. Der Abdeckungsbericht wird unter dem in der Einstellung 'CoverageDirectory' angegebenen Pfad erstellt.

is-Coverage-Verzeichnis

# 2) Mock Related

Mocks werden beim Testen mit Jest häufig verwendet. Beide unten aufgeführten Konfigurationsoptionen ermöglichen eine einfache Konfiguration und das Aufräumen von Mocks.

  • autoMocks: Bei true werden alle Module verspottet, die standardmäßig in den Test importiert werden.
  • clearMocks: Wenn dieser Wert auf true gesetzt ist, werden nach jedem Test alle verspotteten Setups / Module gelöscht, sodass jeder Test mit einem neuen Status beginnt. Dies kann auch mit der testCleanup- oder der After-Methode erreicht werden, aber die Konfiguration macht es noch einfacher.

# 3) Tests im Zusammenhang

# 1) testTimeout: Diese Konfiguration wird verwendet, um eine Hard-Timeout-Einstellung für Tests in Millisekunden bereitzustellen. Jeder Test, der mehr als diesen konfigurierten Schwellenwert durchführt, wird aufgrund einer Timeout-Ausnahme als fehlgeschlagen markiert.

'jest' { 'testTimeout': 100 }

# 2) Global: Diese Konfiguration wird verwendet, um globale Variablen festzulegen, die bei jedem Test verfügbar sein sollen.

'jest' { 'globals': { 'globalVar': 'test global variable!' } }

Versuchen wir, eine globale Variable im Test zu verwenden und festzustellen, ob sie wie erwartet funktioniert.

describe('Calculator tests', () => { test('add 2 numbers', () => { // arrange & act const val = mathOps.sum(3,4) console.log(globalVar) // assert expect(val).toBe(7) })

Nach dem Ausführen dieses Tests sollte der Wert von globalVar protokolliert werden.

is_output

Prüfen Hier für die vollständige Liste aller Konfigurationsoptionen.

Video-Tutorial zur IS-Konfiguration

Debuggen mit Jest

In diesem Abschnitt werden wir versuchen zu verstehen, wie wir auf Jest basierende Tests debuggen können.

Wir werden zwei verschiedene Möglichkeiten anwenden und verstehen, wie wir Jest-Tests debuggen können.

  1. Der native Debugger des Knotens und das anschließende Debuggen der Tests mit Chrome Inspector.
  2. Verwenden der Debug-Konfiguration von Visual Studio Code zum Debuggen der Tests im Visual Studio Code-Editor. Dies ist die am häufigsten verwendete Methode zum Debuggen, da Visual Studio Code heutzutage der Standardeditor der Wahl für die meisten Javascript-Entwicklungen ist.

Jeder dieser Ansätze wird nachstehend ausführlich erläutert.

# 1) Verwenden des nativen Debuggers von Node

Um den nativen Node JS-Debugger verwenden zu können, müssen Sie das Schlüsselwort 'debugger' in den Test einfügen, in dem der Haltepunkt platziert werden soll.

Sobald der Test Executor auf die Debugger Befehl, es unterbricht die Ausführung und wenn wir Chrome-Debugger-Tools anhängen, können wir den Testcode (sowie die zu testende Funktion) mit Chrome-Tools debuggen.

Der Chrome-Browser ist hier eine Voraussetzung, um den Native Debugger von Node verwenden zu können.

Bitte befolgen Sie die folgenden Schritte.

# 1) Fügen Sie dem Test das Debugger-Schlüsselwort hinzu, d. H. An der Stelle, an der der Test den Haltepunkt erreichen soll, fügen Sie den Befehl 'debugger' ein

#zwei) Führen Sie den Test mit dem Flag –inspect-brk aus.

Verwenden Sie den folgenden Befehl, um den Test in einem Haltepunktmodus auszuführen.

/usr/local/bin/node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand

#3) Hängen Sie den Debugger des Knotens in Chrome an. Navigieren Sie nun im Chrome-Browser zu chrome: // inspizieren und stellen Sie eine Verbindung zu dem Ziel-Listener her, der im obigen Schritt erstellt wurde.

Knoten

# 4) Setzen Sie die Ausführung fort, und Sie werden sehen, dass der Haltepunkt im Chrome-Debugger-Inspektor erreicht wird, und Sie können den Aufrufstapel und den Objektstatus im Chrome-Debugger selbst debuggen.

chrome_debugger

Dieser Ansatz zum Debuggen von Jest-Tests ist in Ordnung, aber nicht sehr benutzerfreundlich, da Sie immer wieder vom Code-Editor zu Chrome wechseln müssen und umgekehrt, was viel Reibung verursacht. Im nächsten Abschnitt erfahren Sie, wie Sie den Debugger im Visual Studio Code-Editor selbst konfigurieren.

Der drahtlose Netzwerkverkehr kann mit Sniffern erfasst werden

# 2) Verwenden der Debug-Konfiguration von VS Code

# 1) Wählen Sie im linken Bereich den Abschnitt Debug / Run des Visual Studio-Codes aus.

Ausführen / Debuggen

#zwei) Jetzt werden wir die Debug-Konfiguration für Scherztests aktualisieren. Fügen Sie dazu eine neue Konfiguration hinzu, indem Sie die Menüoption auswählen.

Wählen Sie Konfiguration hinzufügen

#3) Sobald die Option Konfiguration hinzufügen ausgewählt ist, wird die Datei 'launch.json' mit dem Standardinhalt im Editorbereich geöffnet. Entfernen Sie den Standardinhalt und kopieren Sie den folgenden Inhalt, um eine Debug-Konfiguration für die Jest-Tests zu erstellen.

{ 'version': '0.2.0', 'configurations': ( { 'name': 'Debug Jest Tests', 'type': 'node', 'request': 'launch', 'runtimeArgs': ( '--inspect-brk', '${workspaceRoot}/node_modules/jest/bin/jest.js', '--runInBand' ), 'console': 'integratedTerminal', 'internalConsoleOptions': 'neverOpen', 'port': 9229 } ) }

# 4) Speichern Sie die neu hinzugefügte Inhaltskonfiguration, die zum Debuggen der Jest-Tests verwendet wird. Wenn Sie die Konfiguration sorgfältig durchlesen, ähnelt sie dem, was wir getan haben, als wir versucht haben, über den Befehl eine Verbindung zum Node-Debugger in den Chrome Developer-Tools herzustellen.

--inspect-brk ./node_modules/jest/bin/jest.js --runInBand

Der Vorteil von config hier ist, dass die Tests als Teil des Editors selbst ausgeführt / debuggt werden (in diesem Fall VSCode) und wir keine Verbindung zu einer externen Anwendung herstellen müssen.

# 5) Sobald die Debug-Konfiguration erstellt wurde, können Sie den Tests Haltepunkte hinzufügen und mit dieser RUN-Konfiguration ausführen. Dadurch wird sichergestellt, dass der Test an den Haltepunkten stoppt und Sie die Werte und den Objektstatus am Haltepunkt in der tatsächlichen Testdatei debuggen können.

Haltepunkte können durch Klicken in der Nähe der Zeilennummern in den Codedateien hinzugefügt werden.

Haltepunkt setzen

# 6) Sobald der Haltepunkt hinzugefügt wurde, können wir die Run-Konfiguration auswählen, die wir in Schritt 3 hinzugefügt haben, um den Test auszuführen / zu debuggen.

Wählen Sie Konfiguration ausführen

# 7) Wenn Sie die Schaltfläche Ausführen auswählen / darauf klicken, sollten Sie sehen können, dass die Ausführung den festgelegten Haltepunkt erreicht, und Sie können weitere Details wie Umgebungs- / Variablenwerte, Stapelverfolgung usw. am Haltepunkt abrufen.

Mit den Schaltflächen zur Steuerung des Haltepunkts / Codeflusses können Sie zum nächsten Haltepunkt oder innerhalb der Funktion wechseln, um weitere Details zu erhalten.

breakpoint_execution_jest

Video Tutorial Er ISTDebuggen

Es gibt Mokka gegen Jasmin

Im folgenden Abschnitt werden wir Jest vs Mocha und Jest vs Jasmine anhand verschiedener Parameter vergleichen und Funktionsvergleiche wie Snapshot-Tests, einfache Konfiguration und Funktionen verschiedener Frameworks durchführen.

Parameter Ist Mokka Jasmin
Unterstützte Testtypen Wird hauptsächlich für Unit-Tests verwendet.Unit TestingUnit Testing und E2E Testing.
Schnappschuss-Test Vollständig unterstützt - Jest wird speziell für React-Komponenten verwendet und unterstützt das Erstellen von Snapshots einer Komponente und deren Vergleich der Testausgabe mit der gespeicherten Komponentenstruktur.
Schnappschüsse sind eine großartige Möglichkeit, um sicherzustellen, dass sich die Benutzeroberflächen nicht unerwartet ändern.		Keine UnterstützungKeine Unterstützung
Behauptungen und Matcher Verwenden Sie die Bibliothek 'accept.js' für Matcher.Unterstützung für das integrierte Assert-Modul von Node und kann auch andere Assertion-Bibliotheken enthalten.In gebauten Behauptungen
Verspottung Vollständig eingebaute Unterstützung für Mocks and Stubs in Jest.Keine eingebaute Unterstützung zum Verspotten oder Stubben.
Kann mit anderen Bibliotheken wie Sinon verwendet werden, um Mocking zu unterstützen.		Eingebaute eingeschränkte Unterstützung mit spyOn.
Kann in andere Bibliotheken integriert werden.
Ausführungsgeschwindigkeit 4x
Scherztests werden in einem eigenen Sandkasten isoliert. Daher laufen Jest-Tests im Wesentlichen parallel, wodurch sich die Ausführungszeiten erheblich verbessern.		x
Unterstützt keine parallele Ausführung von Tests.		x
Unterstützt keine parallele Ausführung von Tests.
Konfiguration & Setup Sehr einfach - keine Konfiguration erforderlich.
Art der Testausführung KopflosKopflosKopflos
Testausgabe und Kontext Generiert einen umfangreichen Kontext nach der Ausführung - Jest bietet einen detaillierten Testkontext, um tief in die Ursachen eines Fehlers einzudringen und so ein einfaches Debuggen zu gewährleisten.Die Testausgabe ist nicht sehr gut lesbar und macht das Debuggen etwas schwierig.
Debuggen Die Unterstützung für native Node-Debugger kann auch zum Debuggen in Editoren wie Visual Studio Code über eine separate Startkonfiguration verwendet werden.Unterstützt den nativen Node-Debugger.Kann Karma Test Runner verwenden, um Tests in Chrome zu starten und zu debuggen.
Codeabdeckung Jest bietet integrierte Unterstützung für die Codeabdeckung.
Die Coverage-Konfiguration kann in der Jest-Konfiguration angegeben werden, und die Berichte können bei jeder Testausführung erstellt werden.		Keine eingebaute Unterstützung. Bietet Unterstützung für externe Bibliotheken zum Generieren von Abdeckungsberichten.Gleich wie Mokka
Teststil BDD
Alle drei Frameworks unterstützen Tests, die als eine Reihe von Spezifikationen oder Spezifikationen geschrieben werden, die sie lesbarer machen.		BDDBDD

Fazit

In diesem Tutorial haben wir die verschiedenen Möglichkeiten kennengelernt, wie Sie Ihre Jest-Tests in Visual Studio Code oder im Chrome Inspector mit dem nativen Debugger des Knotens debuggen können.

Wir haben auch die häufig verwendeten Konfigurationsoptionen in der Jest-Konfigurationsdatei untersucht. Die Scherzkonfiguration hilft dabei, viele Dinge wie Codeabdeckung, HTML-Berichte, Einrichten von Scheinverhalten, Einrichten globaler Variablen usw. zu erreichen.

PREV Tutorial | ERSTES Tutorial

Literatur-Empfehlungen

^