Depuração

TIP

Ao depurar testes, você pode querer usar o argumento CLI --test-timeout para evitar que os testes atinjam o tempo limite ao pausar em breakpoints.

VS Code

Uma maneira rápida de depurar testes no VS Code é através do JavaScript Debug Terminal. Abra um novo JavaScript Debug Terminal e execute npm run test ou vitest diretamente. Isso funciona com qualquer código executado no Node, sendo compatível com a maioria dos frameworks de teste JS.

Você também pode adicionar uma configuração de inicialização dedicada para depurar um arquivo de teste no VS Code:

{
  // Para mais informações, visite: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Depurar Arquivo de Teste Atual",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

Em seguida, na aba de depuração, selecione 'Depurar Arquivo de Teste Atual'. Você pode então abrir o arquivo de teste que deseja depurar e pressionar F5 para iniciar a depuração.

Modo browser

Para depurar o Modo Browser do Vitest, utilize --inspect ou --inspect-brk na CLI ou defina-o em sua configuração do 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',
    },
  },
});

Por padrão, o Vitest usará a porta 9229 para depuração. Você pode substituí-la passando um valor para --inspect-brk:

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

Utilize a seguinte configuração composta do VS Code para iniciar o Vitest e conectar o depurador ao navegador:

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

IntelliJ IDEA

Crie uma configuração de execução vitest. Use as seguintes configurações para executar todos os testes no modo de depuração:

Configuração	Valor
Diretório de trabalho	/caminho/para/raiz-do-seu-projeto

Em seguida, execute esta configuração no modo de depuração. A IDE irá parar nos pontos de interrupção de JS/TS definidos no editor.

Node Inspector, por exemplo, Chrome DevTools

O Vitest também suporta a depuração de testes sem IDE. No entanto, isso exige que os testes não rodem em paralelo. Utilize um dos seguintes comandos para iniciar o Vitest.

# Para executar em um único worker
vitest --inspect-brk --pool threads --poolOptions.threads.singleThread

# Para executar em um único processo filho
vitest --inspect-brk --pool forks --poolOptions.forks.singleFork

# Para executar no modo navegador
vitest --inspect-brk --browser --no-file-parallelism

Se você estiver usando o Vitest 1.1 ou superior, também pode simplesmente fornecer a flag --no-file-parallelism:

# Se o pool for desconhecido
vitest --inspect-brk --no-file-parallelism

Quando o Vitest iniciar, ele interromperá a execução e aguardará que você abra as ferramentas de desenvolvimento que podem se conectar ao Node.js inspector. Você pode usar o Chrome DevTools para isso acessando chrome://inspect no navegador.

No modo watch, você pode manter o depurador aberto durante as reexecuções de teste utilizando a opção --poolOptions.threads.isolate false.