Débogage

TIP

Lors du débogage de tests, il peut être utile d'utiliser les options suivantes :

• --test-timeout=0 pour empêcher les tests d'expirer lorsque vous vous arrêtez aux points d'arrêt.
• --no-file-parallelism pour empêcher les fichiers de test de s'exécuter en parallèle.

VS Code

Un moyen rapide de déboguer les 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, et donc avec la plupart des frameworks de test JS.

Vous pouvez également ajouter une configuration de lancement dédiée pour déboguer un fichier de test spécifique sous 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 actuel",
      "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 actuel' est sélectionnée. Vous pouvez alors ouvrir le fichier de test que vous souhaitez déboguer et appuyer sur F5 pour commencer 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: {
      provider: 'playwright',
      instances: [{ browser: 'chromium' }],
    },
  },
});

Par défaut, Vitest utilisera le port 9229 comme port de débogage. Vous pouvez le remplacer en passant une valeur à l'option --inspect-brk :

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

Utilisez la configuration composée VSCode suivante pour lancer Vitest et attacher le débogueur dans le 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 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 :

Option	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 JS/TS définis dans l'éditeur.

Inspecteur de Node, par exemple Chrome DevTools

Vitest prend également en charge le débogage des tests sans IDE. Cependant, cela nécessite que les tests ne s'exécutent pas en parallèle. Utilisez l'une des commandes suivantes pour lancer Vitest :

# Pour exécuter dans un seul worker
vitest --inspect-brk --pool threads --poolOptions.threads.singleThread

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

# Pour exécuter en mode navigateur
vitest --inspect-brk --browser --no-file-parallelism

Si vous utilisez Vitest 1.1 ou une version ultérieure, 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 ouvriez les outils de développement pouvant se connecter à l'inspecteur Node.js. Pour ce faire, vous pouvez utiliser les Chrome DevTools 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.