Débogage

TIP

Lors du débogage de tests, il peut être utile d'utiliser l'argument CLI --test-timeout afin d'éviter que les tests n'expirent lorsque vous vous arrêtez aux points d'arrêt.

VS Code

Un moyen rapide de déboguer des tests dans VS Code est d'utiliser le Terminal JavaScript de débogage. Ouvrez un nouveau Terminal JavaScript de débogage et exécutez npm run test ou vitest directement. Cette méthode fonctionne avec tout code exécuté dans Node, ce qui signifie qu'elle est compatible avec la plupart des frameworks de test JS.

Vous pouvez également ajouter une configuration de lancement spécifique pour déboguer un fichier de test dans VS Code :

{
  // Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Déboguer le fichier de test courant",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

Ensuite, dans l'onglet de débogage, assurez-vous que l'option 'Déboguer le fichier de test courant' est sélectionnée. Vous pouvez alors ouvrir le fichier de test que vous souhaitez déboguer et appuyer sur F5 pour démarrer le débogage.

Mode navigateur

Pour déboguer le mode navigateur de Vitest, passez --inspect ou --inspect-brk dans la CLI ou définissez-le dans votre configuration 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: {
      name: 'chromium',
      provider: 'playwright',
    },
  },
});

Par défaut, Vitest utilisera le port 9229 pour le débogage. Vous pouvez le modifier en spécifiant une valeur avec --inspect-brk :

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

Utilisez la configuration composée dans VSCode suivante pour lancer Vitest et attacher le débogueur au navigateur :

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Lancer Vitest en mode navigateur",
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "console": "integratedTerminal",
      "args": ["--inspect-brk", "--browser", "--no-file-parallelism"]
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Se connecter au navigateur Vitest",
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "Déboguer Vitest en mode navigateur",
      "configurations": ["Se connecter au navigateur Vitest", "Lancer Vitest en mode navigateur"],
      "stopAll": true
    }
  ]
}

IntelliJ IDEA

Créez une configuration d'exécution Vitest. Utilisez les paramètres suivants pour exécuter tous les tests en mode débogage :

Paramètre	Valeur
Répertoire de travail	/chemin/vers/votre-racine-de-projet

Exécutez ensuite cette configuration en mode débogage. L'IDE s'arrêtera aux points d'arrêt JavaScript/TypeScript définis dans l'éditeur.

Node Inspector, par exemple Chrome DevTools

Vitest prend également en charge le débogage des tests sans IDE. Cela nécessite cependant que les tests ne soient pas exécutés simultanément. Utilisez l'une des commandes suivantes pour lancer Vitest.

# Pour lancer dans un seul worker
vitest --inspect-brk --pool threads --poolOptions.threads.singleThread

# Pour lancer dans un seul processus enfant
vitest --inspect-brk --pool forks --poolOptions.forks.singleFork

# Pour lancer en mode navigateur
vitest --inspect-brk --browser --no-file-parallelism

Si vous utilisez Vitest 1.1 ou supérieur, vous pouvez également simplement fournir l'option --no-file-parallelism :

# Si le pool est inconnu
vitest --inspect-brk --no-file-parallelism

Une fois Vitest démarré, il arrêtera l'exécution et attendra que vous ayez ouvert les devtools qui peuvent se connecter à l'inspecteur Node.js. Vous pouvez utiliser Chrome DevTools pour cela en ouvrant chrome://inspect dans le navigateur.

En mode watch, vous pouvez garder le débogueur ouvert pendant les réexécutions de tests en utilisant l'option --poolOptions.threads.isolate false.