Usar el depurador de Visual Studio Code con Jest

Depurar el código es una tarea clave en el desarrollo de software. El depurador de Visual Studio Code permite insertar puntos de interrupción (breakpoints) en el código para poder detener la ejecución de este y comprobar detenidamente cómo funciona exactamente la lógica implementada. Algo clave para detectar fallos y problemas. En esta entrada vamos a ver cómo se debe configurar el depurador de Visual Studio Code con Jest para poder insertar un punto de interrupción en las pruebas unitarias.

Código de ejemplo

A modo de ejemplo se va a utilizar el proyecto tslane que se puede descargar del repositorio de Analytics Lane en GitHub. Una vez descargado se deben instalar las dependencias con el comando npm install. Una vez hecho esto se puede cargar el proyecto en Visual Studio Code.

tslane en Visual Studio Code — Proyecto tslane cargado en Visual Studio Code

Iniciar el proceso de depuración

Para iniciar el proceso de depuración en Visual Studio Code solamente se tiene que ir a la opción Run and debug (una flecha de play y un bicho). En esta pestaña debemos pulsar la opción create a lauch.json file o, en el caso de que ya exista alguna, en el caso de que ya tengamos una configurada pulsar en el botón con forma de rueda dentada.

Archivo de configuración en Visual Studio Code — Opción para crear el archivo json para la configuración del depurardo en Visual Studio Code

En el archivo launch.json que se crea se debe agregar la siguiente configuración.

{
 // Use IntelliSense to learn about possible attributes.
 // Hover to view descriptions of existing attributes.
 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
  {
   "name": "Debug Jest",
   "type": "node",
   "request": "launch",
    "runtimeArgs": [
    "--inspect-brk",
    "${workspaceRoot}/node_modules/jest/bin/jest.js",
    "--config",
    "${workspaceRoot}/jest.config.js",
    "--runInBand"
   ],
   "console": "integratedTerminal",
   "internalConsoleOptions": "neverOpen"
  }
 ]
}

Esto creará una nueva opción en el panel de Run and debug llamada Debug Jest con el que se pueden lanzar las pruebas unitarias y en el depurador.

Archivo de configuración creado en Visual Studio Code — El archivo de configuración del depurado en Visual Studio Code

En este ejemplo se asume que el archivo de configuración de Jest (jest.config.js) se encuentra en la raíz del proyecto, si no es así se deberá cambiar la opción en runtimeArgs.

Depurador de Visual Studio Code con Jest

Ahora solamente se debe de abrir un archivo, insertar un nuevo punto de interrupción y lanzar el depurado pulsado en la fecha verde que se encuentra en la parte superior del panel del Run and debug. Lo que lanzará las pruebas y ejecutará el código hasta llegar al primer punto de interrupción.

Punto de interrupción en las pruebas unitarias — La ejecución del código detenida en un punto de interrupción situado en las pruebas unitarias

Conclusiones

En esta breve entrada se ha visto cómo se puede configurar el depurador de Visual Studio Code para poder parar las pruebas unitarias creadas con Jest. Un truco que es fácil de implementar y permite comprobar problemas en las pruebas unitarias.

Imagen de Walter Knerr en Pixabay