Debugging

TIP

Quando si esegue il debug dei test, è consigliabile utilizzare l'argomento CLI --test-timeout per evitare che i test vadano in timeout quando si fermano ai breakpoint.

VS Code

Il modo più rapido per eseguire il debug dei test in VS Code è tramite il JavaScript Debug Terminal. Aprire un nuovo JavaScript Debug Terminal ed eseguire npm run test o vitest direttamente. Questo approccio funziona con qualsiasi codice eseguito in Node, rendendolo compatibile con la maggior parte dei framework di test JS.

È anche possibile aggiungere una configurazione di avvio dedicata per eseguire il debug di un file di test in VS Code:

{
  // Per maggiori informazioni, visitare: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Current Test File",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

Nella scheda di debug, assicurarsi che sia selezionato 'Debug Current Test File'. A questo punto, è possibile aprire il file di test di cui si desidera eseguire il debug e premere F5 per avviare il debug.

Modalità browser

Per eseguire il debug della Modalità Browser di Vitest, specificare --inspect o --inspect-brk nella CLI o definirli nella configurazione di 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',
    },
  },
});

Per impostazione predefinita, Vitest utilizzerà la porta 9229 per il debug. È possibile sovrascriverla specificando un valore per --inspect-brk:

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

Utilizzare la seguente configurazione combinata di VSCode per avviare Vitest e collegare il debugger al browser:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Run Vitest Browser",
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "console": "integratedTerminal",
      "args": ["--inspect-brk", "--browser", "--no-file-parallelism"]
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Vitest Browser",
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "Debug Vitest Browser",
      "configurations": ["Attach to Vitest Browser", "Run Vitest Browser"],
      "stopAll": true
    }
  ]
}

IntelliJ IDEA

Crea una configurazione di esecuzione Vitest. Utilizzare le seguenti impostazioni per eseguire tutti i test in modalità debug:

Impostazione	Valore
Working directory	/path/to/your-project-root

Quindi eseguire questa configurazione in modalità debug. L'IDE si fermerà sui breakpoint JS/TS impostati nell'editor.

Node Inspector, ad es. Chrome DevTools

Vitest supporta anche il debug dei test senza un IDE. Richiede però che i test non siano eseguiti in parallelo. Usare uno dei seguenti comandi per avviare Vitest:

# Per eseguire in un singolo worker
vitest --inspect-brk --pool threads --poolOptions.threads.singleThread

# Per eseguire in un singolo processo figlio
vitest --inspect-brk --pool forks --poolOptions.forks.singleFork

# Per eseguire in modalità browser
vitest --inspect-brk --browser --no-file-parallelism

Se si utilizza Vitest 1.1 o superiore, è sufficiente specificare il flag --no-file-parallelism:

# Se il pool è sconosciuto
vitest --inspect-brk --no-file-parallelism

Una volta avviato, Vitest interromperà l'esecuzione e attenderà l'apertura degli strumenti di sviluppo in grado di connettersi all'inspector di Node.js. È possibile utilizzare Chrome DevTools a tal fine aprendo chrome://inspect nel browser.

In modalità watch è possibile mantenere il debugger aperto durante le riesecuzioni dei test impostando l'opzione --poolOptions.threads.isolate false.