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, presionactrl + shit + p
para abrir el panel de acciones de Visual Studio CodeEscribimos 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
yflag.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! 😎🧪
Top comments (0)