Debugowanie

TIP

Podczas debugowania testów warto rozważyć użycie następujących opcji:

• --test-timeout=0 aby zapobiec przekroczeniu limitu czasu testów podczas zatrzymywania na punktach przerwania
• --no-file-parallelism aby zapobiec równoległemu uruchamianiu plików testowych

VS Code

Szybki sposób na debugowanie testów w VS Code to użycie JavaScript Debug Terminal. Otwórz nowy JavaScript Debug Terminal i uruchom npm run test lub bezpośrednio vitest. Działa to z dowolnym kodem uruchamianym w środowisku Node, więc będzie działać z większością frameworków testowych JS.

Możesz również dodać specjalną konfigurację uruchomieniową, aby debugować plik testowy w VS Code:

{
  // Aby uzyskać więcej informacji, odwiedź: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debuguj bieżący plik testowy",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

Następnie w panelu debugowania upewnij się, że wybrano „Debuguj bieżący plik testowy”. Następnie otwórz plik testowy, który chcesz debugować i naciśnij F5, aby rozpocząć debugowanie.

Tryb przeglądarki

Aby debugować tryb przeglądarkowy Vitesta, użyj --inspect lub --inspect-brk w CLI lub zdefiniuj je w swojej konfiguracji Vitest:

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' }],
    },
  },
});

Domyślnie Vitest użyje portu 9229 jako portu debugowania. Możesz to nadpisać, podając wartość w --inspect-brk:

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

Użyj następującej złożonej konfiguracji VSCode do uruchomienia Vitest i podłączenia debugera w przeglądarce:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Uruchom Vitest w przeglądarce",
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "console": "integratedTerminal",
      "args": ["--inspect-brk", "--browser", "--no-file-parallelism"]
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Dołącz do Vitest w przeglądarce",
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "Debuguj Vitest w przeglądarce",
      "configurations": ["Dołącz do Vitest w przeglądarce", "Uruchom Vitest w przeglądarce"],
      "stopAll": true
    }
  ]
}

IntelliJ IDEA

Utwórz konfigurację uruchomieniową Vitesta. Skorzystaj z następujących ustawień, aby uruchomić wszystkie testy w trybie debugowania:

Ustawienie	Wartość
Katalog roboczy	/ścieżka/do/katalogu-głównego-projektu

Następnie uruchom tę konfigurację w trybie debugowania. Środowisko IDE zatrzyma wykonanie na punktach przerwania JS/TS ustawionych w edytorze.

Inspektor Node, np. Chrome DevTools

Vitest umożliwia również debugowanie testów bez środowiska IDE. Wymaga to jednak wyłączenia równoległego uruchamiania testów. Skorzystaj z jednego z poniższych poleceń, aby uruchomić Vitest.

# Aby uruchomić w pojedynczym workerze
vitest --inspect-brk --pool threads --poolOptions.threads.singleThread

# Aby uruchomić w pojedynczym procesie potomnym
vitest --inspect-brk --pool forks --poolOptions.forks.singleFork

# Aby uruchomić w trybie przeglądarki
vitest --inspect-brk --browser --no-file-parallelism

Jeśli używasz Vitest 1.1 lub nowszego, możesz również po prostu podać flagę --no-file-parallelism:

# Jeśli pula jest nieznana
vitest --inspect-brk --no-file-parallelism

Po uruchomieniu Vitest wstrzyma wykonanie i poczeka na otwarcie narzędzi deweloperskich, które mogą połączyć się z inspektorem Node.js. W tym celu możesz użyć Chrome DevTools, otwierając chrome://inspect w przeglądarce.

W trybie obserwacji możesz pozostawić debuger otwarty podczas ponownych uruchomień testów, korzystając z opcji --poolOptions.threads.isolate false.