Configurar entorno de desarrollo en Visual Studio Code para hacer Testing con Jest

Github
LinkedIn

En este post, aprenderás a configurar un entorno de desarrollo en Visual Studio Code para realizar pruebas unitarias con Jest, un marco de prueba popular y fácil de usar para aplicaciones JavaScript. Configurar un entorno de desarrollo adecuado es crucial para garantizar la eficiencia y la calidad del código.

Crear Snippets útiles

Los snippets de código son una herramienta útil que facilita la escritura de nuestras pruebas unitarias. Al trabajar con Visual Studio Code, podemos crear estos snippets de manera sencilla. Una extensión esencial es Jest Snippets que facilita y acelera la escritura del código.

De igual forma, podemos crear un snippet personalizado para generar nuestra estructura de prueba unitaria siguiendo el patrón A-A-A, para ello instalaremos la extensión de Snippet Generator y seguiremos los siguientes pasos:

• Creamos un archivo de prueba, por ejemplo, calculator.spec.js, escribimos nuestra estructura A-A-A y seleccionamos todo el código

// calculator.spec.js
it("should behave ...", () => {
  // Arrange

  // Act

  // Assert
});

• Si estas trabajando en MacOS presiona cmd + shit + p o si estas trabajando en Windows, presiona ctrl + shit + p para abrir el panel de acciones de Visual Studio Code

• Escribimos Generate Snippet y lo seleccionamos

• Establecemos un nombre, por ejemplo: it aaa

• Ingresar el scope es opcional

• Establecemos un prefijo, este prefijo si será requerido, por ejemplo: aaa, el cuál será el que escribamos cuando necesitemos generar nuestros snippet en un futuro

• Ingresar la descripción es opcional

• El snippet generado se copió en nuestro porta papeles

• Abrimos nuevamente el panel de acciones de Visual Studio Code e ingresamos la opción Configure User Snippets

• Seleccionamos el lenguaje de programación que deseamos, por ejemplo, typescript

• Pegamos nuestro snippet previamente generado

• ¡Listo, ahora ya podemos usar nuestro snippet personalizado! 🚀

Extensiones útiles de Visual Studio Code

Al trabajar con Jest y Visual Studio Code, tenemos disponibles muchas extensiones que nos ayudaran a optimizar nuestro desarrollo de las pruebas.

Jest Runner

Esta herramienta nos ayudará a agilizar el proceso de escritura y validación de pruebas. Veamos un ejemplo:

• Tenemos una prueba sencilla que suma dos números

• Al instalar la herramienta, notaremos que aparecerán dos opciones, Run y Debug arriba de cada prueba. Al presionar la opción de Run automáticamente se ejecutará la prueba

• Podemos notar algo interesante, nos indica que una prueba no se ejecutó, esto es porque estamos ejecutando una prueba en específico

Jest Test Explorer

Esta herramienta nos ayudará a visualizar todas las pruebas y poder ejecutarlas individualmente o todas a la vez. Veamos un ejemplo:

• Tenemos dos archivos de pruebas: calculator.spec.js y flag.spec.js

• Nos dirigimos a Visual Studio Code, al menú de Vista o View, notaremos que tendremos una nueva opción llamada Testing

• Seleccionamos la opción de Testing y nos aparecerá un panel con toda la lista de las pruebas disponibles

• Podremos abrir y desplegar cada una de las pruebas, es importante tener un titulo descriptivo para cada prueba

• Les dejo unas imágenes descriptivas de su uso. Podrán notar que cuando falla una prueba, podremos hacer clic sobre el título de dicha prueba, veremos el detalle de la prueba y la razón del por qué fallo.

• Otro punto importante, la extensión nos ayuda a detectar cuando una prueba ha sido modificada, lo podremos notar porque la tonalidad de los colores deja de ser vívida

It's test time! 😎🧪