Configurar entorno de desarrollo en Visual Studio Code para hacer Testing con Jest
Tags: testing, javascript, jest, visualcode
Published: 2024-03-19 22:02:31

[Github](https://github.com/ccdosorio)
[LinkedIn](https://www.linkedin.com/in/christianosori0/)

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](https://marketplace.visualstudio.com/items?itemName=andys8.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](https://marketplace.visualstudio.com/items?itemName=wenfangdu.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

```javascript
// 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7atn89y1y4vh75xtntv.png)

- Establecemos un nombre, por ejemplo: **it aaa**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnkl0zf67bghegwladff.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h58ol0glsz0doqrsg5aa.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2iksbcu9gpjl610uo6b.png)

- Seleccionamos el lenguaje de programación que deseamos, por ejemplo, **_typescript_**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcj0hos7f3jd9k4uwkgk.png)

- Pegamos nuestro snippet previamente generado

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0z7cnixsets70c6mpf0.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6eh8q6ncs04t5vgct5z.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bjzqcosnlfirar8n10j.png)

## 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](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zlw5f0nzzmlgkf0ucrcy.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekdofq53a626ir22qxtz.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vt44yyj1gfods88ut5p0.png)

## [Jest Test Explorer](https://marketplace.visualstudio.com/items?itemName=kavod-io.vscode-jest-test-adapter)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8e65rp12i0s7547altb7.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prqff96dn9exhmqngzqk.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbvr9b9djcza4kwfy5y7.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mku1wnhiivh8n7zj27ha.png)


It's test time! 😎🧪