Einrichten des Test-Frameworks Jest

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

Beschreiben des Test-Frameworks Jest
Beschreiben der Rolle von Node.js und npm
Installieren von Node.js und npm
Installieren des JavaScript-Moduls "@salesforce/sfdx-lwc-jest" in einem Salesforce DX-Projekt

Bevor Sie loslegen

Für dieses Modul müssen Salesforce CLI, Visual Studio Code und Salesforce Extensions für Visual Studio Code installiert und auf dem aktuellen Stand sein. Um diese Voraussetzungen zu erfüllen, empfehlen wir Ihnen, die folgenden Projekte durchzuarbeiten, bevor Sie fortfahren: Schnelleinstieg: Salesforce DX, Schnelleinstieg: Visual Studio Code für die Salesforce-Entwicklung und Schnelleinstieg: Lightning-Webkomponenten.

Wir verfolgen einen Ansatz der testgetriebenen Entwicklung (TDD), bei dem wir den Jest-Test schreiben, ehe wir die Komponente schreiben, die damit getestet wird. Aus diesem Grund schlägt jeder Test zunächst fehl. Dann aktualisieren wir die Komponente so, dass der Jest-Test bestanden wird.

Erstellen eines Salesforce DX-Projekts

Der erste Schritt vor dem Test besteht darin, ein Salesforce DX-Projekt zu erstellen, in dem Sie Ihre Lightning-Webkomponenten und Jest-Tests speichern.

Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie unter Windows Strg+Umschalt+P bzw. unter macOS Befehl+Umschalt+P drücken.
Geben Sie sfdx ein.
Wählen Sie SFDX: Create Project aus. Wenn diese Option nicht angezeigt wird, führen Sie, bevor Sie fortfahren, zuerst die nötigen Schritte durch, um die in der ersten Einheit genannten Voraussetzungen für dieses Modul zu erfüllen.
Wählen Sie Standard aus.
Geben Sie als Projektname test-lwc ein.
Drücken Sie die Eingabetaste.
Wählen Sie einen Ordner aus, in dem das Projekt gespeichert werden soll.
Klicken Sie auf Create Project und warten Sie, bis das neue Visual Studio Code-Fenster geöffnet wurde.
Klicken Sie auf View und wählen Sie Terminal. Damit öffnen Sie ein Terminalfenster in Visual Studio Code. Das Terminal ist standardmäßig auf das oberste Verzeichnis des Projekts festgelegt. Sie benötigen das Terminal später, um Befehle im Arbeitsverzeichnis dieses Projekts auszuführen.

Was sind Node.js und npm?

Node.js ist eine JavaScript-Laufzeitumgebung, die auf Chromes V8 JavaScript-Engine aufsetzt, und npm ist ein Paketmanager für die Verteilung wiederverwendbarer Codemodule. In der Sprachwelt von Node.js und npm werden diese wiederverwendbaren Codemodule als Node-Module bezeichnet. In der Salesforce-Terminologie entspricht ein Node-Modul – also wiederverwendbarer Code, der einfach an mehrere Projekte verteilt werden kann – den freigeschalteten Paketen.

Node.js und npm sind beliebte Tools moderner JavaScript-Entwickler. Nähere Informationen über das moderne JavaScript enthält der Trail Verwenden von JavaScript.

Installieren von Node.js und NPM

Jest ist ein Node-Modul, das heißt, Sie müssen Node und npm installieren, um Jest verwenden zu können. Genau das tun wir nun.

Installieren Sie Node.js aus https://nodejs.org/en/download/. Wir empfehlen die Verwendung der Version LTS (Long Term Support) mit langfristigem Support.
Prüfen Sie, ob Node.js installiert wurde. Geben Sie dazu in das Visual Studio Code-Terminal, das wir vorhin geöffnet haben, den folgenden Befehl ein:
```
node --version
```
Als Ausgabe sollte v16.13.0 oder eine neuere Version angezeigt werden.
Bei der Installation von Node.js wird automatisch auch npm installiert.
Geben Sie den folgenden Befehl in ein Terminal ein:
```
npm --version
```
Als Ausgabe sollte 8.1.0 oder höher angezeigt werden. Es empfiehlt sich, npm aktuell zu halten.

Eventuell müssen Sie npm aktualisieren. Weitere Details zum Upgrade von npm für verschiedene Betriebssysteme finden Sie in der npmjs-Dokumentation.

Was ist Jest?

Jest ist ein leistungsfähiges Tool mit umfangreichen Funktionen, mit dem Sie JavaScript-Tests schreiben können. Jest kann Informationen über die Codeabdeckung sammeln und unterstützt Simulationen, damit Tests bei komplexen Abhängigkeiten isoliert werden können. Jest-Tests werden nicht in einem Browser ausgeführt oder mit einer Organisation verbunden, sodass sie schnell ablaufen. Verwenden Sie Jest zum Schreiben von Einheitentests für alle Ihre Lightning-Webkomponenten. Um Jest-Tests für Lightning-Webkomponenten auszuführen, muss Ihr Salesforce DX-Projekt das Node-Modul "@salesforce/sfdx-lwc-jest" enthalten.

Jest-Tests funktionieren nur mit Lightning-Webkomponenten in Salesforce DX-Projekten, nicht jedoch mit Aura-Komponenten. Informationen zum Testen von Aura-Komponenten finden Sie unter Testen von Komponenten mit Lightning Testing Service (Englisch).

Installieren des Node-Moduls "sfdx-lwc-jest"

Mit dem Node-Modul @salesforce/sfdx-lwc-jest können Sie Jest-Tests für Lightning-Webkomponenten schreiben, ausführen und debuggen. Die Salesforce CLI macht es einfach, Jest und seine Abhängigkeiten im Projekt zu installieren.

Vergewissern Sie sich, dass die CLI ordnungsgemäß installiert und die neueste Version hat, indem Sie über die Befehlszeile den folgenden Befehl ausführen.
```
sf update
```
Die Ausgabe sollte wie folgt aussehen: cli:Updating CLI...
Führen Sie im Visual Studio Code-Terminal den folgenden Befehl im obersten Verzeichnis Ihres Salesforce DX-Projekts aus:
```
sf force lightning lwc test setup
```
Damit installieren Sie npm und @salesforce/sfdx-lwc-jest im Projekt. Das Ergebnis sollte in etwa so aussehen:

Wenn Sie die Fehlermeldung "No matching version found for prettier-plugin-apex@^1.10.1" (Keine übereinstimmende Version für prettier-plugin-apex@^1.10.1 gefunden) erhalten, aktualisieren Sie die Datei "package.json" -> devDependencies -> prettier-plugin-apex in ^1.10.0.

Wie Sie sehen, werden bei diesem Vorgang einige Schwachstellen festgestellt. Für unsere Zwecke spielt das keine Rolle. Dies sind nicht die Schwachstellen, die Sie suchen.

Um andere Möglichkeiten für die Installation des Node-Moduls Jest zu bieten, stellt Salesforce das Node-Modul @salesforce/sfdx-lwc-jest als JavaScript-Paket für unter https://www.npmjs.com/package/@salesforce/sfdc-lwc-jest und als Open Source-Projekt für GitHub unter https://github.com/salesforce/sfdx-lwc-jest zur Verfügung.
Führen Sie diese npm-Befehle im obersten Verzeichnis Ihres Salesforce DX-Projekts aus:
npm install
Und danach:
npm install @salesforce/sfdx-lwc-jest --save-dev

Ausführen von Jest-Tests

Ausgezeichnet! Sie haben Ihr Salesforce DX-Projekt so eingerichtet, dass es die Jest-Tests ausführen kann, die Sie später in diesem Modul noch schreiben werden. Nachdem Sie nun alles eingerichtet haben, gibt es mehrere Möglichkeiten für die Ausführung der Jest-Tests. Sie können das Skript direkt aufrufen, npm-Befehle verwenden oder mit Mausklicks in Visual Studio Code arbeiten. Sie haben die Möglichkeit, einen Test oder alle Tests in einer Datei oder einem Projekt auszuführen. Sie können Tests sogar automatisch ausführen, wenn der Code, den der betreffende Test abdeckt, geändert wird.

Sehen wir uns die verschiedenen Möglichkeiten für die Ausführung von Jest-Tests an.

Der Node-Befehl "sfdx-lwc-jest"

Mit dem folgenden Node-Befehl können Sie das Skript direkt von seinem Installationsort im Projekt ausführen.

Geben Sie den folgenden Befehl im Visual Studio Code-Terminal im obersten Verzeichnis Ihres Salesforce DX-Projekts ein:
```
node node_modules/@salesforce/sfdx-lwc-jest/bin/sfdx-lwc-jest
```
Da es noch keine Jest-Tests gibt, sollte die angezeigte Ausgabe wie folgt lauten: No tests found, exiting with code 1.
Wenn Sie den Fehler "sourceApiVersion ungültig" erhalten, liegt das an einer aktualisierten Erweiterung für Visual Code mit der neuesten Salesforce-Version.
Fehler "Invalid sourceApiVersion found" in sfdx-project.json. 51.0 erwartet, 52.0 gefunden

Öffnen Sie in Visual Studio Code im Verzeichnis auf oberster Ebene die Datei sfdx-project.json.

Ändern Sie die Codezeile mit "sourceApiVersion" in die Version, die in der empfangenen Fehlermeldung erwartet wird.
"sourceApiVersion": "51.0"

Speichern Sie die Datei.

Das ist schon einmal ein guter Anfang – mit Automatisierung lässt sich das Ganze aber noch verbessern.

Automatisieren von Testskripts mit Package.json und npm

Ein Ziel von Einheitentests besteht darin, Entwickler zu ermuntern, solche Tests im Rahmen ihres Entwicklungs- und Continuous Integration-Prozesses zu schreiben und ausführen, damit Fehler eher früher als später gefunden und behoben werden. Wenn dazu immer wieder lange Befehle (wie der im vorherigen Absatz) auswendig gelernt und eingegeben werden müssen, ist das eher kontraproduktiv und bringt uns dem Ziel nicht unbedingt näher. Hier kommt die Automatisierung ins Spiel.

npm bietet vordefinierte, flexible Automatisierungsmöglichkeiten für Skripts. Bei der Installation, die wir in den vorangegangenen Schritten durchgeführt haben, wurde eine Reihe von Optionen zur Eigenschaft scripts der Datei "package.json" auf der Root-Ebene Ihres Projekts hinzugefügt.

{
  "name": "test-lwc",
  ...  "scripts": {
    ...
    "test:unit": "sfdx-lwc-jest",
    "test:unit:watch": "sfdx-lwc-jest --watch",
    "test:unit:debug": "sfdx-lwc-jest --debug",
    "test:unit:coverage": "sfdx-lwc-jest --coverage",
    ...
  },
  ...}

Wenn Sie alle Tests für Ihr Projekt ausführen möchten, führen Sie diesen npm-Befehl direkt vom Basisverzeichnis Ihres Projekts aus.

npm run test:unit

Sollen Tests in einem bestimmten Verzeichnis ausgeführt werden, verwenden Sie den oben angegebenen Befehl in einem bestimmten Verzeichnis. Es werden dann nur die Tests in diesem Verzeichnis ausgeführt. Auf diese Weise können Sie den Code isolieren, den Sie testen.

Kontinuierliche Testausführung während der Entwicklung

Bei dieser Option verlässt sich Node auf Git, um den Code zu "beobachten". Damit Sie diese Option verwenden können, muss Git für Ihr Projekt initialisiert sein. Wenn Sie Tests für eine einzelne Komponente ausführen möchten, sobald Sie Änderungen speichern, wechseln Sie in das Verzeichnis der Komponente und führen den nachfolgend angegebenen npm-Befehl aus, der "sfdx-lwc-jest" mit dem Parameter --watch verwendet. Wie oben erwähnt, könnten Sie diesen Befehl auch vom Basisverzeichnis Ihres Projekts ausführen, damit bei jeder Änderung alle Tests im Projekt ausgeführt werden.

npm run test:unit:watch

Jest beobachtet nun alle Komponentendateien auf Änderungen und führt alle relevanten Tests aus, sobald eine Änderung entdeckt wird.

Ausführen von Tests im Debug-Modus von Jest

Die Ausführung von Jest-Tests im Debug-Modus ist nützlich, wenn Sie Ihre Tests und den Code Ihrer Anwendung Schritt für Schritt durchgehen möchten, um herauszufinden, warum sich Ihre Tests oder Ihr Code nicht wie erwartet verhalten. Sie können Jest-Tests mit den folgenden Tools debuggen.

Visual Studio Code mit Salesforce Extension Pack
Entwicklertools von Chrome
Visual Studio Code-Debugger mit erweiterter Konfiguration

Das Salesforce Extension Pack für Visual Studio Code ist die einfachste und unkomplizierteste Option, während die Entwicklertools von Chrome auf erfahrene Webentwickler zugeschnitten sind. Die erweiterte Konfiguration für den VS Code-Debugger ermöglicht Ihnen außerdem, mit verschiedenen Debuggern und Debugging-Szenarien zu arbeiten. Die erweiterte Konfiguration ist die flexibelste Option für das Debuggen Ihrer Jest-Tests.

Weitere Informationen finden Sie unter Debuggen von Jest-Tests für Lightning-Webkomponenten. Informationen über die Fehlerbehebung von Jest-Problemen finden Sie unter Jest: Fehlerbehebung (Englisch).

Ausführen von Tests und Anzeigen der Codeabdeckung

Wenn Sie die Codeabdeckung der Tests angezeigt bekommen möchten, verwenden Sie die Option --coverage, wie im nachfolgenden Befehl gezeigt.

npm run test:unit:coverage

Ausführen von Tests mit Mausklicks in Visual Studio Code

Die Salesforce Extensions für Visual Studio Code geben Ihnen weitgehende Kontrolle und visuelles Feedback bei der Ausführung von Jest-Tests. Sie können wählen, ob Sie einzelne, mehrere oder alle Tests ausführen möchten. Außerdem haben Sie die Möglichkeit, die Option --watch für eine Datei zu verwenden, da Git in Visual Studio Code vorinstalliert ist.

Klicken Sie auf das Testkolbensymbol , um die Test-Randleiste zu öffnen. Wenn das Symbol nicht angezeigt wird, müssen Sie eventuell ein neues SFDX-Projekt erstellen. In der Test-Randleiste gibt es einen Abschnitt namens "LWC Tests", in dem alle Jest-Tests im Projekt aufgeführt werden. So sieht die Test-Randleiste aus, wenn Ihr Projekt Tests enthält:

'LWC Tests' in der Test-Randleiste des Projekts 'test-lwc'

Klicken Sie auf die Starttaste , um einen oder mehrere Tests in einem Projekt auszuführen. Bewegen Sie den Mauszeiger über das Verzeichnis oder einen einzelnen Test, um die Starttaste einzublenden. Bei Ausführung eines Tests werden die Ergebnisse im Terminal angezeigt. Außerdem werden die Ergebnisse farbig in der Randleiste angegeben. Grün bedeutet, dass der Test erfolgreich abgeschlossen wurde. Blau bedeutet, dass der Test nicht ausgeführt wurde, Orange kennzeichnet übersprungene Tests, und Rot bedeutet, dass der Test nicht erfolgreich ausgeführt wurde. Wenn Sie in der Randleiste auf den Test klicken, wird die Datei geöffnet und Sie gelangen direkt zu diesem Test.

Klicken Sie auf das Aktualisierungssymbol , um die Testergebnisse zu entfernen.

Es gibt auch direkte Steuerungsmöglichkeiten in der Testdateiansicht.

Testdateiansicht in Visual Studio Code

Klicken Sie auf die Starttaste in der Hauptsymbolleiste, um alle Tests in der Datei auszuführen. Sie können auch über jedem Test in der Datei auf Run Test klicken, um den betreffenden Test auszuführen.

Wenn bei jedem Speichern von Änderungen alle Tests in der Datei ausgeführt werden sollen, klicken Sie auf das Beobachtungssymbol in der Hauptsymbolleiste. Diese Option ist sehr nützlich, wenn Sie an Tests in der Datei arbeiten.

Ganz schön beeindruckend. Das war jetzt eine ganze Menge Informationen.

Also gut, wenden wir uns der Praxis zu und schreiben ein paar Tests.