DEV Community

Cover image for Configurar entorno de desarrollo en Visual Studio Code para hacer Testing con Jest
Christian Osorio
Christian Osorio

Posted on

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
});
Enter fullscreen mode Exit fullscreen mode
  • 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

Image description

  • Establecemos un nombre, por ejemplo: it aaa

Image description

  • 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

Image description

  • 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

Image description

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

Image description

  • Pegamos nuestro snippet previamente generado

Image description

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

Image description

Image description

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

Image description

  • 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

Image description

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

Image description

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

Image description

  • 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

Image description

  • 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.

Image description

  • 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

Image description

It's test time! 😎🧪

Top comments (0)