Debugging

TIP

Quando si esegue il debug dei test, si consiglia di utilizzare le seguenti opzioni:

• --test-timeout=0 per impedire che i test vadano in timeout quando si fermano ai breakpoint.
• --no-file-parallelism per evitare che i file di test vengano eseguiti in parallelo.

VS Code

Un metodo rapido per eseguire il debug dei test in VS Code è utilizzare il Terminale JavaScript per il debug. Aprire un nuovo Terminale JavaScript per il debug ed eseguire direttamente npm run test o vitest. Questa soluzione è compatibile con qualsiasi codice eseguito in Node, pertanto funzionerà con la maggior parte dei framework di testing JS.

È inoltre possibile aggiungere una configurazione di avvio dedicata per 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 file di test corrente",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

Successivamente, nella scheda di debug, assicurarsi che sia selezionato 'Debug file di test corrente'. È quindi possibile aprire il file di test che si desidera sottoporre a debug e premere F5 per avviare il processo.

Modalità browser

Per eseguire il debug della Modalità Browser di Vitest, passare --inspect o --inspect-brk tramite la CLI o definirlo nella propria configurazione 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' }],
    },
  },
});

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

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

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

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

IntelliJ IDEA

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

Impostazione	Valore
Directory di lavoro	/path/to/your-project-root

Successivamente, eseguire questa configurazione in modalità debug. L'IDE si arresterà automaticamente ai breakpoint JS/TS definiti nell'editor.

Node Inspector, ad es. Chrome DevTools

Vitest supporta anche il debug dei test senza l'uso di un IDE. Tuttavia, ciò richiede che i test non siano eseguiti in parallelo. Utilizzare 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 sta utilizzando Vitest 1.1 o superiore, è possibile anche semplicemente fornire il flag --no-file-parallelism:

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

Una volta avviato, Vitest sospenderà l'esecuzione e attenderà la connessione degli strumenti per sviluppatori compatibili con l'inspector di Node.js. È possibile utilizzare Chrome DevTools per questo, aprendo chrome://inspect nel browser.

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