Debugging

TIP

Beim Debuggen von Tests kann es hilfreich sein, das CLI-Argument --test-timeout zu verwenden, um zu verhindern, dass Tests bei Haltepunkten in einen Timeout laufen.

VS Code

Eine schnelle Methode, 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. Diese Methode funktioniert mit jedem Code, der in Node.js ausgeführt wird, und ist somit mit den meisten JS-Test-Frameworks kompatibel.

Alternativ können Sie 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"
    }
  ]
}

Wählen Sie anschließend im Debug-Tab 'Aktuelle Testdatei debuggen' aus. Öffnen Sie 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: {
      name: 'chromium',
      provider: 'playwright',
    },
  },
});

Standardmäßig verwendet Vitest Port 9229 für das Debugging. Sie können diesen Port überschreiben, indem Sie --inspect-brk einen Wert zuweisen:

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

Verwenden Sie die folgende VSCode Compound-Konfiguration, um Vitest zu starten und den Debugger im Browser zu verbinden:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Vitest im 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 Browser-Debugger anhängen",
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "Vitest Browser debuggen",
      "configurations": ["An Browser-Debugger anhängen", "Vitest im 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 stoppt an den im Editor gesetzten JS/TS-Haltepunkten.

Node Inspector, z.B. Chrome DevTools

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

# In einem einzelnen Worker ausführen
vitest --inspect-brk --pool threads --poolOptions.threads.singleThread

# In einem einzelnen Child-Prozess ausführen
vitest --inspect-brk --pool forks --poolOptions.forks.singleFork

# Im Browser-Modus ausfü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 angeben:

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

Sobald Vitest startet, hält es die Ausführung an und wartet darauf, dass Sie Entwicklungstools öffnen, die eine Verbindung zum Node.js Inspector herstellen können. Hierfür können Sie Chrome DevTools verwenden, indem Sie chrome://inspect im Browser öffnen.

Im Watch-Modus können Sie den Debugger während erneuter Testläufe geöffnet lassen, indem Sie die Option --poolOptions.threads.isolate false verwenden.