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

Christian Osorio — Tue, 19 Mar 2024 22:02:31 +0000

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! 😎🧪

Forem: Christian Osorio

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

Crear Snippets útiles

Extensiones útiles de Visual Studio Code

Jest Runner

Jest Test Explorer