Comprobar eventos emitidos desde un componente hijo hacia el padre con vue-test-utils

En videos anteriores hemos aprendido a probar una comunicación descendente entre componentes. Nos referimos al paso de props desde el componente padre hacia el hijo. En este video nos centraremos en la comunicación ascendente, es decir, a la emisión de eventos desde el componente hijo para que el componente padre actue en consecuencia. Haremos uso...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Sustituyendo la implementación de componentes con stubs y shallow con vue-test-utils

En ciertas ocasiones necesitamos que al montar un componente hijo, éste sea sustituido por otro, o simplemente dejarlo sin comportamiento para poder probar el componente padre en completo aislamiento. En esta lección aprenderemos a hacerlo a través de la opción stubs del objeto de configuración de mount. También explicaremos la diferencia entre utilizar shallow en lugar de mount para...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Probando paso de props entre componentes con vue-test-utils

En la lección anterior aprendimos a comprobar que un componente padre muestra un componente hijo. En la mayoría de ocasiones no nos basta con probar su simple existencia, sino que también necesitamos comprobar que un componente se comunica de manera correcta con otro. En este video veremos cómo probar que las props que esperamos recibir...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Comprobar que un componente padre renderiza un componente hijo con vue-test-utils

Para iniciar esta segunda parte del curso aprenderemos a comprobar que un componente padre contiene un componente hijo. Crearemos un componente ToDoList y nos aseguraremos de que se renderizan tantos componentes Task como elementos tengamos en nuestro arreglo de tareas. Los métodos del wrapper que aceptan selectores de CSS como contains, find, findAll etc. también admiten como parámetro...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Pruebas usando los métodos isVisible(), is(), isEmpty() y classes() de vue-test-utils

Para terminar con esta primera parte del curso vamos a realizar un recorrido por las funciones básicas que nos faltan por ver del wrapper . Estas funciones son isVisible(), is(), isEmpty() y classes(). En la siguiente parte de este curso veremos con detalle las funciones que tienen que ver con la comunicación entre componentes....

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Uso de los métodos findAll(), exists() y contains() de vue-test-utils

A veces es necesario encontrar varios elementos del mismo tipo para realizar comprobaciones a un conjunto, esto lo conseguiremos usando la función findAll() como veremos en esta lección, donde también introduciremos ciertos condicionales para renderizar elementos basándonos en estados de la aplicación, lo que nos llevará al uso de funciones como exists() y contains()....

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Pruebas de Computed Properties y métodos con Vue.js y vue-test-utils

En esta lección veremos cómo comprobar que una computed property se esté mostrando en el lugar correcto y que un método sea invocado en el momento esperado. Haremos uso por primera vez del objeto de configuración de mount que nos permitirá sobrescribir propiedades de nuestro componente. También veremos un caso de uso para la función...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Métodos find(), trigger(), html() y text() de vue-test-utils

vue-test-utils es una API basada en un wrapper. Un wrapper es un objeto que contiene un componente montado y métodos para probarlo. En este video veremos cómo utilizar los métodos find, trigger, html y text. También haremos uso del objeto vm. Este objeto está solo disponible cuando el wrapper es un componente Vue y da acceso a...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Configuración de babel-jest y uso de mount

De la misma manera que tuvimos que instalar un preprocesador para transpilar ficheros .vue, ahora vamos a necesitar otro para transpilar sintaxis ES6 en nuestras pruebas. De esta forma podremos importar módulos y hacer uso de las nuevas funcionalidades que las últimas versiones de JavaScript nos brindan....

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Instalación de Jest y vue-test-utils

En este video vamos a realizar la instalación de Jest y de vue-test-utils, componentes que nos permitirán comenzar a escribir nuestras pruebas. Además escribiremos una primera prueba muy sencilla y una vez que todo esté listo, pasaremos a la siguiente lección donde comenzaremos a escribir nuestras pruebas para los componentes de Vue....

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.