Depuração

TIP

Ao depurar testes, você pode considerar o uso das seguintes opções:

• --test-timeout=0 para evitar que os testes atinjam o tempo limite ao parar em pontos de interrupção.
• --no-file-parallelism para garantir que os arquivos de teste não sejam executados em paralelo.

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 em JS.

Você também pode adicionar uma configuração de inicialização dedicada para depurar um arquivo de teste específico 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 guia de depuração, certifique-se de que a opção 'Depurar Arquivo de Teste Atual' esteja selecionada. Você pode então abrir o arquivo de teste que deseja depurar e pressionar F5 para iniciar o processo de depuração.

Modo de Navegador

Para depurar o Modo de Navegador do Vitest, passe --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: {
      provider: 'playwright',
      instances: [{ browser: 'chromium' }],
    },
  },
});

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

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

Use a seguinte configuração composta do VSCode para iniciar o Vitest e anexar o depurador ao navegador:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Executar Vitest no Navegador",
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "console": "integratedTerminal",
      "args": ["--inspect-brk", "--browser", "--no-file-parallelism"]
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Anexar ao Vitest no Navegador",
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "Depurar Vitest no Navegador",
      "configurations": ["Anexar ao Vitest no Navegador", "Executar 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/do/seu/projeto

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

Node Inspector, como Chrome DevTools

O Vitest também suporta a depuração de testes sem uma IDE. No entanto, isso exige que os testes não sejam executados em paralelo. Use 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, você também pode simplesmente usar a flag --no-file-parallelism:

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

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

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