Del curso: Vue avanzado 2

Estructura básica de una prueba unitaria en Vue - Tutorial de Vue.js

Del curso: Vue avanzado 2

Comenzar mi mes de prueba gratis Comprar para mi equipo

Estructura básica de una prueba unitaria en Vue

“

En esta lección te quiero explicar cómo estructurar pruebas unitarias en una aplicación Vue. Sucede que cuando utilizamos el "composition API" para crear componentes las pruebas no tienen acceso a las variables, funciones y demás dentro de la función 'setup', por lo que debemos depender de los cambios que suceden en la interfaz para determinar si el componente está funcionando correctamente o no. Cuando probamos un componente debemos montarlo dentro del sistema de pruebas, esto se hace a través de la función 'mount'. 'Mount' es incluida dentro del set de herramientas de pruebas unitarias que incluye Vue. Aquí puedes notar que la variable 'wrapper' recibe un objeto desde la función 'map', 'mount' recibe como parámetro el componente Vue, como puedes ver aquí, y luego una configuración general de cómo queremos que se comporte la instancia de Vue en donde este componente va a correr. La configuración general yo la he creado dentro de este archivo que puedo ver aquí. Ya con esta variable yo puedo utilizarla para así, por ejemplo, ver si el componente existe, encontrar elementos dentro del componente o ejecutar evento del "mouse". Ya revisando cada una de las pruebas puedes notar que estas se basan en interacciones con la interfaz. Por ejemplo, esta prueba unitaria prueba que el componente gastos muestre una lista de gastos. Utilizando el objeto 'wrapper' yo llamo la función 'findAll' y paso una clase de CSS para encontrar todas las filas dentro del componente que se encargan de mostrar la información de los gastos. Aquí tú puedes pasar otro tipo de información, puedes pasar el nombre de la etiqueta y demás. Estos utilizan la nomenclatura de selección de CSS. Ya con una lista de objetos que he recibido desde la función 'findAll' yo valido cuántos elementos he recibido. Yo espero que tenga que ser tres, ya que dentro del "mock" del 'store' yo agregué tres gastos. Por ejemplo, en caso de que el componente esté rendereando más o menos filas, esta prueba fallaría. Así es como tú puedes probar la funcionalidad de un componente Vue utilizando las herramientas de Test Utils, Jest y demás.

Contenido