Debugging

TIP

Beim Debuggen von Tests können die folgenden Optionen nützlich sein:

• --test-timeout=0, um zu verhindern, dass Tests bei Haltepunkten eine Zeitüberschreitung erleiden
• --no-file-parallelism, um zu verhindern, dass Testdateien parallel ausgeführt werden

VS Code

Eine schnelle Möglichkeit, Tests in VS Code zu debuggen, ist die Verwendung des JavaScript Debug Terminal. Öffnen Sie ein neues JavaScript Debug Terminal und führen Sie npm run test oder vitest direkt aus. Dies funktioniert mit jedem Code, der in Node ausgeführt wird, und somit auch mit den meisten JS-Test-Frameworks.

Sie können auch eine spezielle Startkonfiguration hinzufügen, um eine Testdatei in VS Code zu debuggen:

{
  // Weitere Informationen finden Sie unter: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Aktuelle Testdatei debuggen",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

Stellen Sie dann im Debugging-Tab sicher, dass 'Aktuelle Testdatei debuggen' ausgewählt ist. Öffnen Sie anschließend die Testdatei, die Sie debuggen möchten, und drücken Sie F5, um das Debugging zu starten.

Browser-Modus

Um den Vitest Browser-Modus zu debuggen, geben Sie --inspect oder --inspect-brk in der CLI an oder definieren Sie dies in Ihrer Vitest-Konfiguration:

CLI

vitest --inspect-brk --browser --no-file-parallelism

vitest.config.js

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    inspectBrk: true,
    fileParallelism: false,
    browser: {
      provider: 'playwright',
      instances: [{ browser: 'chromium' }],
    },
  },
});

Standardmäßig verwendet Vitest Port 9229 als Debugging-Port. Sie können dies überschreiben, indem Sie einen Wert an --inspect-brk übergeben:

vitest --inspect-brk=127.0.0.1:3000 --browser --no-file-parallelism

Verwenden Sie die folgende VSCode zusammengesetzte Konfiguration, um Vitest zu starten und den Debugger im Browser anzuhängen:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Vitest Browser ausführen",
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "console": "integratedTerminal",
      "args": ["--inspect-brk", "--browser", "--no-file-parallelism"]
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "An Vitest Browser anhängen",
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "Vitest Browser debuggen",
      "configurations": ["An Vitest Browser anhängen", "Vitest Browser ausführen"],
      "stopAll": true
    }
  ]
}

IntelliJ IDEA

Erstellen Sie eine Vitest-Ausführungskonfiguration. Verwenden Sie die folgenden Einstellungen, um alle Tests im Debug-Modus auszuführen:

Einstellung	Wert
Arbeitsverzeichnis	/path/to/your-project-root

Führen Sie diese Konfiguration dann im Debug-Modus aus. Die IDE hält an JS/TS-Haltepunkten an, die im Editor gesetzt wurden.

Node Inspector, z.B. Chrome DevTools

Vitest unterstützt auch das Debuggen von Tests ohne IDEs. Dies setzt jedoch voraus, dass Tests nicht parallel ausgeführt werden. Verwenden Sie einen der folgenden Befehle zum Starten von Vitest:

# Um in einem einzelnen Worker auszuführen
vitest --inspect-brk --pool threads --poolOptions.threads.singleThread

# Um in einem einzelnen Child-Prozess auszuführen
vitest --inspect-brk --pool forks --poolOptions.forks.singleFork

# Um im Browser-Modus auszuführen
vitest --inspect-brk --browser --no-file-parallelism

Wenn Sie Vitest 1.1 oder höher verwenden, können Sie auch einfach das Flag --no-file-parallelism mitgeben:

# Wenn der Pool unbekannt ist
vitest --inspect-brk --no-file-parallelism

Sobald Vitest gestartet ist, wird die Ausführung angehalten und wartet darauf, dass Sie Entwicklertools öffnen, die eine Verbindung zum Node.js Inspector herstellen können. Dafür können Sie Chrome DevTools verwenden, indem Sie chrome://inspect im Browser öffnen.

Im Watch-Modus können Sie den Debugger während der Testwiederholungen geöffnet lassen, indem Sie die Option --poolOptions.threads.isolate false nutzen.