Depuración

TIP

Al depurar pruebas, es recomendable usar el argumento de línea de comandos --test-timeout para evitar que las pruebas excedan el tiempo de espera mientras se detienen en los puntos de interrupción.

VS Code

Una forma rápida de depurar pruebas en VS Code es a través de la Terminal de Depuración de JavaScript. Abra una nueva Terminal de Depuración de JavaScript y ejecute npm run test o vitest directamente. Este método funciona con cualquier código que se ejecute en Node, por lo que es compatible con la mayoría de los frameworks de pruebas de JavaScript.

También puede añadir una configuración de lanzamiento dedicada para depurar un archivo de prueba específico 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 iniciar el proceso de depuración.

Modo navegador

Para depurar el Modo Navegador de Vitest, pase --inspect o --inspect-brk en la CLI o defínalos 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: {
      name: 'chromium',
      provider: 'playwright',
    },
  },
});

Por defecto, Vitest utilizará el puerto 9229 para la depuración. Puede sobrescribir este valor pasando un puerto diferente a --inspect-brk:

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

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

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Ejecutar Vitest en el 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 el navegador",
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "Depurar Vitest en el navegador",
      "configurations": ["Adjuntar a Vitest en el navegador", "Ejecutar Vitest en el 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:

Configuración	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 de JS/TS establecidos en el editor.

Inspector de Node, ej. Chrome DevTools

Vitest también permite la depuración de pruebas sin un 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, detendrá 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 de observación, puede mantener el depurador abierto durante las re-ejecuciones de prueba utilizando la opción --poolOptions.threads.isolate false.