Pruebas unitarias en Vue con Test Utils: Introducción práctica

Como los masters en programación que somos, sabemos que todo el tiempo se están creando nuevas herramientas que nos ayudan a desarrollar mejor software de la mejor manera.

Ejemplos de estas herramientas son el mismo Vue. Este framework está basado en unas APIs nativas de Webcomponents, pero son muy engorrosas de usar, ya que debemos conocer ampliamente la manera en la que se crean los elementos con la función CustomElements y aún hay navegadores que no las soportan aún.

Por esto Vue Test Utils llegó como la librería oficial de Vue para hacer testing, así que ahora la pregunta que nos debemos hacer es, ¿qué es lo que hace más fácil Vue Test Utils?

Para responder esa pregunta debemos entender el ciclo de vida de un componente de Vue.

Diagrama de ciclo de vida

En el código que nos descargó en example.spec.js, del repositorio que estamos usando para este curso:

Vamos a borrar todo su contenido y empezar a escribir lo necesario para nuestras pruebas.

---

Iniciamos escribiendo esto al inicio del documento:

import { mount } from '@vue/test-utils'

Con esta línea lo que estamos haciendo es importar mount de la librería de test-utils. Y, ¿qué hace exactamente?

mount es una función que recibe dos parámetros,

• El primer parámetro es un objeto de tipo Component {Componente} Component

• El segundo es un objeto también, pero este objeto va a ser de tipo opciones, y funciona como inicializador del componente que vamos a probar.

{Opciones} Options

Siguiendo con el código, lo que necesitamos sería importar nuestro componente:

import App from '@/App.vue'

Para después hacer un wrapper de este:

const wrapper = mount(App)

Pondremos un console.log(wrapper) al final, para ver que contiene nuestro objeto:

Nuestro código debe quedar así:

import { mount } from  '@vue/test-utils'



import App from  '@/App.vue'



const  wrapper = mount(App)



console.log(wrapper.element)

Para correr las pruebas utilizamos el comando npm run test:unit en nuestra terminal.

Si hemos llegado hasta aquí debemos de ver algo como esto.

El que tengamos pruebas fallidas, significa que aún no tenemos ninguna sentencia que corroborar, y es correcto, por ahora solamente tenemos un wrapper de nuestro componente, el cual se ve de la siguiente manera:

Propiedades de los Wrapper

Un Wrapper contiene un elemento llamado vm, el cual es la instancia de Vue de la cual estamos haciendo el Wrapper.

Para comprobar esto, vamos a agregar la siguiente línea de código, en el mismo archivo que estamos usando:

const vm = wrapper.vm

Sobre ese elemento vamos a acceder a muchas propiedades de esta instancia, de la siguiente manera:

• vm.$data

Tipo: Object

Descripción: este elemento es la propiedad data donde están nuestros estados.

• vm.$props

Tipo: Object

Descripción: estas son las propiedades que recibe el componente.

• vm.$el

Tipo: Element

Descripción: el elemento raíz del DOM, el cual está manejando Vue.

• vm.$children

Tipo: Array < Vue instance >

Descripción: Array de las instancias de los nodos hijos del componente de la instancia.

Si queremos probar cualquiera de las siguientes propiedades, solamente debemos de ponerlo en el console.log(vm.$data)

En el caso anterior, esto es lo que debe de salir

---

Hasta ahora nuestro código debe estar de esta manera.

import { mount } from  '@vue/test-utils'



import App from  '@/App.vue'



const  wrapper = mount(App)



const  vm = wrapper.vm



console.log(vm.$data)

Y nos han estado saliendo varios errores, de que no pasa las pruebas. Por ahora no hay nada de qué preocuparse, estamos revisando las herramientas que nos otorga Test Utils, aún no estamos poniendo ninguna prueba, por lo cual no pueden ser exitosas.

Hay que tener presente que esto sólo corre en modo de desarrollo,

no está afectando directamente nuestro código, así que el que nos salgan errores, no significa que es en nuestro código.

Más adelante revisaremos más funciones de Vue Test Utils, si quieres verlas más a profundidad, este link a la documentación te puede ayudar.

---

Si hay alguna propiedad de la instancia de Vue que no conocías hasta revisar esto, escribela en los comentarios.

En la siguiente clase aprenderás a usar Jest, una herramienta muy útil para la creación de pruebas en Vue.