Zum Hauptinhalt springen

Debugging-Tests

Ausführen von Tests in VS Code​

Es gibt mehrere Möglichkeiten, Tests in VS Code auszuführen, die alle in der Node.js-Debugging-Anleitung beschrieben sind.

Wir empfehlen Ihnen, die folgende Vorgehensweise auszuprobieren.

Automatisches Anhängen aktivieren​

Dies ist eine einmalige Aktion.

  1. Drücken Sie in VS Code Ctrl+Shift+P (Cmd+Shift+P), um die Befehlspalette zu öffnen.
  2. Suchen Sie eine Option mit der Bezeichnung Debug: Auto Attach und wählen Sie diese aus.
  3. Ein Menü wird angezeigt. Wählen Sie Smart. Dies ermöglicht VS Code das automatische Anhängen an Node.js-Prozesse, die im Debug-Modus gestartet werden.

Einen Test debuggen​

Wenn Sie zum ersten Mal in einem App-Ordner debuggen, sehen Sie möglicherweise den folgenden Screenshot und nicht den „grünen Pfeil“, um mit dem Debuggen zu beginnen. Klicken Sie auf Alle automatischen Debugging-Konfigurationen anzeigen und wählen Sie „Node.js“. Daraufhin wird die Liste der Skripte angezeigt, die aus package.json ausgeführt werden sollen.

Screenshot des JavaScript-Debug-Terminals

Nachdem Sie es einmal ausgeführt haben, finden Sie das Javascript-Debug-Terminal in der Terminal-Ansicht, wenn Sie ein neues Terminal erstellen.

  1. Öffnen Sie eine Testdatei und setzen Sie einen Breakpoint.
  2. Drücken Sie Ctrl+Shift+D (Cmd+Shift+D), um die Debug-Ansicht zu öffnen.
  3. Klicken Sie auf den Nach-unten-Pfeil neben der grünen Wiedergabeschaltfläche und wählen Sie Node.js aus. Sie erhalten eine Liste aller in Ihrer package.json-Datei verfügbaren Skripte.
  4. Wählen Sie Run Script: test.
  5. Drücken Sie die grüne Wiedergabeschaltfläche.

Dadurch wird Jest im Debugging-Modus ausgeführt. Der Debugger hält an dem von Ihnen hinzugefügten Breakpoint an.

Nur eine Testdatei ausführen​

Note: Sie müssen diese Konfiguration jedes Mal ändern, wenn Sie eine andere Testdatei ausführen möchten.
  1. Drücken Sie Ctrl+Shift+D (Cmd+Shift+D), um die Debug-Ansicht zu öffnen.

  2. Klicken Sie auf den Nach-unten-Pfeil neben der grünen Wiedergabeschaltfläche und wählen Sie Node.js aus. Sie erhalten eine Liste aller in Ihrer package.json-Datei verfügbaren Skripte.

  3. Wählen Sie Run Script: test. Damit wird der Test in der Debug-Ansicht ausgewählt.

  4. Wählen Sie das Zahnradsymbol aus. Damit wird die Testkonfiguration zu launch.json hinzugefügt.

    {
    "type": "node-terminal",
    "name": "Run Script: test",
    "request": "launch",
    "command": "npm run test",
    "cwd": "${workspaceFolder}"
    }
  5. Ändern Sie die Zeile, in der "command": "npm run test", steht, wie folgt

    "command": "npm run test -- ${workspaceFolder}/src/pages/Welcome/__tests__/Welcome.test.js --watch",

    wobei ${workspaceFolder}/src/pages/Welcome/__tests__/Welcome.test.js der Pfad zu Ihrer Testdatei ist.

    Die --watch-Option aktiviert den Überwachungsmodus. Das bedeutet, dass Jest den Test jedes Mal erneut durchführt, wenn Sie die Datei speichern.

    Note: Falls der Befehl npm run test die Breakpoints nicht auslöst, versuchen Sie es stattdessen mit jutro app:tests.
  6. Drücken Sie die grüne Wiedergabeschaltfläche.

Nur einen Test ausführen​

Note: Sie müssen diese Konfiguration jedes Mal ändern, wenn Sie eine andere Testdatei ausführen möchten.

Um nur einen Test durchzuführen, verwenden Sie die Option -testNamePattern (oder -t).

  1. Bereiten Sie eine Debug-Konfiguration vor, wie im vorherigen Abschnitt beschrieben.
  2. Ändern Sie die Zeile, in der "command": "npm run test", steht, wie folgt
    "command": "npm run test -- -t 'Welcome Page render Welcome page main image'",

In diesem Beispiel führen wir nur einen Test namens render Welcome page main image durch, aber das it dieses Tests befindet sich innerhalb einer describe-Direktive namens Welcome Page. Unser -t-Argument folgt also dem Muster:

"command": "npm run test -- -t '<describeString> <itString>'",

Ausführen von Tests aus IntelliJ Idea​

So führen Sie Tests aus IntelliJ Idea aus:

  1. Klicken Sie mit der rechten Maustaste auf eine Testdatei und wählen Sie eine Ausführungsoption. IntelliJ erstellt eine Build-Konfiguration.
  2. Ändern Sie die Build-Konfigurationsoptionen:
    • Jest-Paket in node_modules/@jutro/cli-platform
    • Jest-Optionen in app:tests

Ihre Optionen sollten in etwa wie folgt aussehen:

ein Screenshot der IntelliJ-Konfiguration für Tests

Suche nach der Zeichenfolge-ID einer Übersetzung​

Es kann schwierig sein, die Zeichenfolge-ID einer in der Anwendung angezeigten Meldung herauszufinden. Um übersetzungsunabhängige Tests zu vereinfachen, gibt es 2 Optionen zur Anzeige von Zeichenfolgen-IDs anstelle der eigentlichen Übersetzungen:

  • Abfrageparameter displayStringId
  • Umgebungsvariable DEV_DISPLAY_STRING_ID=true (erfordert einen Neustart der Anwendung)

Der Abfrageparameter displayStringId in Aktion