Pruebas unitarias en Vue.js: Setup y primeros pasos
En caso que aun no lo conozcas Vue.js es un framework javascript que se está convirtiendo en una sólida tercera alternativa (además de Angular y React) para crear aplicaciones basadas en Javascript, si aun tienes dudas sobre su popularidad, dale una ojeada a este artículo sobre las tendencias de la tecnología para el 2019.
Para crear un proyecto usando Vue.js el primer paso, es instalar la linea de comandos, para instalarlo usando nodejs, inserta este comando en tu terminal:
npm install -g @vue/cliUna vez instalado en tu ordenador, puedes crear un proyecto con este comando:
vue create pruebas-unitarias-vueAl momento de crear el proyecto, la linea de comandos de Vue.js te ofrece varias opciones de configuración, para este ejercicio, selecciona la opción manual y la configuración para habilitar pruebas unitarias con Jest. Si no estas seguro como hacerlo, revisa estas imágenes con las opciones recomendadas:
Después de crear el proyecto, tienes que abrir la carpeta donde se encuentra para trabajar en él
cd pruebas-unitarias-vueTenemos ya un proyecto listo para trabajar, examinemos el archivo “package.json” donde se encuentra la configuración general para familiarizarnos con los paquetes que vamos a usar
Como puedes ver en la imagen, la linea de comandos de vue ha instalado 2 paquetes que se encargaran de gestionar las pruebas unitarias:
- test-utils: el conjunto de herramientas de Vue.js para realizar las pruebas unitarias
- Jest: un framework para ejecutar pruebas unitarias enfocado en la sencillez y velocidad
Ahora que conocemos el entorno de trabajo, solo nos falta usar el comando para ejecutar las pruebas unitarias:
npm run test:unitEsto activará el sistema de pruebas de Jest y, en el caso del proyecto que hemos creado, el resultado será una prueba unitaria ejecutada con éxito
Este proyecto está configurado para ejecutar pruebas usando archivos javascript que incluyan el sufijo “.spec.js” en su nombre. Para mantener el orden del proyecto, las pruebas están almacenadas en la carpeta “tests” y justo allí puedes encontrar un archivo llamado “example.spec.js” que ejecuta la prueba que vemos en la terminal. Puedes darle una ojeada para familiarizarte con la sintaxis que usaremos.
Creando una prueba unitaria en Vue
Vamos ahora a crear nuestra propia prueba, ya verás que el proceso de crear la prueba, como la mayoría de cosas en Vue.js, es muy rápido y sencillo.
El primer paso, es crear el componente que vamos a probar, para eso busca la carpeta “components” y crea un documento con el nombre “Usuario.vue” , en ese documento, incluye este código
<template>
<div>Usuario</div>
</template>
<script>
export default {
data: function () {
return {
usuarioActivo: false
};
},
methods: {
activarUsuario: function() {
this.usuarioActivo = true;
}
}
};
</script>
<style>
</style>Este sencillo componente tiene una variable llamada “usuarioActivo” con el valor “false” al momento de inicializar y un método con el nombre “activarUsuario” que cambia el valor de la variable a “true”.
Ahora vamos a crear una prueba para verificar que todo funcione según lo esperado. La prueba debe ser creada en la carpeta “tests” con el archivo “usuario.spec.js” y el contenido del archivo será este:
import { shallowMount } from '@vue/test-utils'
import Usuario from '@/components/Usuario.vue'
describe('componente Usuario.vue', () => {
it('debe cambiar el valor a true', () => {
/// Crea una instancia del componente
const wrapper = shallowMount(Usuario);
/// Evalúa que el valor por defecto sea "false"
expect(wrapper.vm.usuarioActivo).toBe(false);
/// Ejecuta el metodo que cambia el valor de la variable a "true"
wrapper.vm.activarUsuario();
/// Evalúa que el nuevo valor usuarioActivo sea "true"
expect(wrapper.vm.usuarioActivo).toBe(true);
})
})Algunos elementos de este archivo a los que debes ponerle atención
- import: aquí vamos a importar dos elementos, primero el set de herramientas de pruebas de Vue.js y segundo el componente “Usuario” que vamos a probar
- describe: Un texto que describe el conjunto de pruebas que vamos a realizar
- it: esta es la prueba en sí, está compuesto por una breve descripción de lo que evalúa y un bloque de código que será ejecutado para examinar un elemento o conducta en particular.
Puedes examinar los comentarios que dejé dentro del código para seguir paso a paso el proceso de la prueba, pero en resumen, evaluaremos que la variable que incluimos tenga la capacidad de cambiar su valor por defecto al valor “true” luego de ejecutar un método.
Para ejecutar esta nueva prueba, solo invoca de nuevo el comando:
npm run test:unitJest incluye automáticamente la prueba que acabamos de escribir a la lista global de pruebas, no hace falta ninguna configuración adicional, el resultado que deberías obtener es este:
¡Te dije que era sencillo! ya realizamos una prueba unitaria con una sintaxis muy simple y sencilla …. ¡así da gusto realizar pruebas con Vue+Jest!
Si quieres aprender mas de Vue o de pruebas unitarias no dudes en dejarme un mensaje y para profundizar un poco más en estos temas te recomiendo algunos de mis cursos publicados en LinkedIn Learning:
