¿Qué es Vue Test Utils?

6/12

Lectura

¿Qué es Vue Test Utils?

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
DiagramaClase6.png

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

24.png

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.

22.png

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:

23.png

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)

19.png

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.

Aportes 6

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Funcion mount, recibe un componente y options

mount(Component, opts)
vm = Component, es la instancia de Vue
vm.$data = Object, este elemento es la priopiedad data donde estan nuestro estado 
vm.$props = Object, son las props que recibe el component
vm.$el = Element, el elemneto raiz del DOM, el cual esta manejando Vue
vm.$children = Array<Vue instance> = Array de las instancias de los nodos hijos del componente.

Para no tener que correr el comando

npm run test:unit

cada vez que quieren ver el resultado de las pruebas pueden agregar esta configuracion el package.json en la linea 8 donde esta esto

 "test:unit": "vue-cli-service test:unit",

cambiarlo por esto

"test:unit": "vue-cli-service test:unit --watch",

Excelente, ¿Me habré perdido de una clase?, lo pregunto porque se mencionó que partiendo de un código que se descargo previamente desde el repo del proyecto del curso, pero en ningun momento he visto que iniciaramos o clonaramos dicho repositorio en nuestro entorno local, si alguien me corrige mil gracias.

Cómo podría aplicar esto pero usando Nuxt?

vm es un mundo desconocido, vi mucha propiedades interesantes que me dan curiosidad, como por ejemplo _renderProxy, _self o $root. Excelente clase.

Increíble, la única propiedad que no conocía era la de $children jaja

Básicamente lo que hacemos es importar mount y nuestro componente, el cual nos devolverá un wrapper y ese wrapper contiene una instancia de Vue de nuestro componente el cual nos ayudará a correr las pruebas