Depuración

TIP

Al depurar pruebas, puede que le interese usar las siguientes opciones:

• --test-timeout=0 para evitar que las pruebas excedan el tiempo límite al detenerse en los puntos de interrupción
• --no-file-parallelism para evitar que los archivos de prueba se ejecuten en paralelo

VS Code

Una forma rápida de depurar pruebas en VS Code es mediante el JavaScript Debug Terminal. Abra un nuevo JavaScript Debug Terminal y ejecute npm run test o vitest directamente. Esto funciona con cualquier código que se ejecute en Node, por lo que funcionará con la mayoría de los frameworks de pruebas de JS.

También puede añadir una configuración de lanzamiento dedicada para depurar un archivo de prueba en VS Code:

{
  // Para más información, visite: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Depurar archivo de prueba actual",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

Luego, en la pestaña de depuración, asegúrese de seleccionar 'Depurar archivo de prueba actual'. A continuación, puede abrir el archivo de prueba que desea depurar y presionar F5 para comenzar la depuración.

Modo navegador

Para depurar el Modo Navegador de Vitest, utilice --inspect o --inspect-brk en la CLI o defínalo en su configuración de 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 defecto, Vitest utiliza el puerto 9229 para depuración. Puede sobrescribirlo especificando un valor en --inspect-brk:

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

Utilice la siguiente configuración compuesta de VS Code para iniciar Vitest y adjuntar el depurador al navegador:

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

IntelliJ IDEA

Cree una configuración de ejecución para Vitest. Utilice los siguientes ajustes para ejecutar todas las pruebas en modo depuración:

Ajuste	Valor
Directorio de trabajo	/ruta/a/la-raíz-de-su-proyecto

Luego, ejecute esta configuración en modo depuración. El IDE se detendrá en los puntos de interrupción en JS/TS establecidos en el editor.

Inspector de Node, ej. Chrome DevTools

Vitest también admite la depuración de pruebas sin IDE. Sin embargo, esto requiere que las pruebas no se ejecuten en paralelo. Utilice uno de los siguientes comandos para iniciar Vitest.

# Para ejecutar en un solo worker
vitest --inspect-brk --pool threads --poolOptions.threads.singleThread

# Para ejecutar en un solo proceso hijo
vitest --inspect-brk --pool forks --poolOptions.forks.singleFork

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

Si está utilizando Vitest 1.1 o superior, también puede simplemente proporcionar la opción --no-file-parallelism:

# Si el pool es desconocido
vitest --inspect-brk --no-file-parallelism

Una vez que Vitest se inicie, pausará la ejecución y esperará a que abra las herramientas de desarrollo que puedan conectarse al inspector de Node.js. Puede usar Chrome DevTools para esto abriendo chrome://inspect en el navegador.

En el modo watch, puede mantener el depurador abierto durante las nuevas ejecuciones de prueba utilizando las opciones --poolOptions.threads.isolate false.