Cursos Empresas Blog Live Conf Eventos Precios

0:007:03

Wrapper: probando elementos y estados

Clase 8 de 14

Clase 8 / 14

// Comprobar que una propiedad del componente Vue tenga un valor específico
expect(wrapper.vm.myProp).toBe('expected value');

// Comprobar que un método del componente Vue devuelve un valor esperado
expect(wrapper.vm.myMethod()).toBe('expected value');

// Comprobar que el componente Vue ha emitido un evento específico
expect(wrapper.emitted('my-event')).toBeTruthy();

// Comprobar que el componente Vue ha actualizado su estado correctamente
expect(wrapper.vm.$data.myState).toBe('expected value');

// Comprobar que una propiedad del componente Vue tenga un valor específico
expect(wrapper.vm.myProp).toBe('expected value');

// Comprobar que un método del componente Vue devuelve un valor esperado
expect(wrapper.vm.myMethod()).toBe('expected value');

// Comprobar que el componente Vue ha emitido un evento específico
expect(wrapper.emitted('my-event')).toBeTruthy();

// Comprobar que el componente Vue ha actualizado su estado correctamente
expect(wrapper.vm.$data.myState).toBe('expected value');

Comentarios (4)4 comentarios

Uriel Solis Salinas

Hace 4 años

Wrapper: probando elementos y estado

. wrapper.vm es una propiedad proporcionada por vue-test-utils que permite acceder a la instancia del componente Vue encapsulado por el wrapper. . La instancia del componente Vue proporciona acceso a todas las propiedades, métodos y eventos definidos en el componente, lo que permite realizar pruebas más avanzadas y detalladas. Al acceder a la instancia del componente Vue a través de wrapper.vm, podemos interacturar con ella directamente y realizar comprobaciones sobre su estado y comportamiento. . A continuación se muestra algunos ejemplos de lo que se puede hacer con wrapper.vm:

Acceder y modificar las propiedades del componente Vue.

// Acceder a una propiedad
const propValue = wrapper.vm.myProp;

// Modificar una propiedad
wrapper.vm.myProp = 'new value';

Llamar a los métodos del componente Vue.

// Llamar a un método sin argumentos
wrapper.vm.myMethod();

// Llamar a un método con argumentos
wrapper.vm.myMethod('arg1', 'arg2');

Disparar eventos en el componente Vue.

// Disparar un evento en el componente Vue
wrapper.vm.$emit('my-event', eventData);

Acceder al estado del componente.

// Acceder al estado del componente Vue
const myState = wrapper.vm.$data.myState;

Realizar aserciones sobre el estado o la salida del componente Vue.

. En resumen, wrapper.vm proporciona acceso directo a la instancia del componente Vue encapsulado por el wrapper, lo que permite interacturar con él directamente y realizar pruebas avanzadas y detalladas sobre su estado y comportamiento.

Irving Caamal

La doc de la API de Wrapper para vue-test-utils

victor rodriguez

pregunta el wraper funciona de la misma manera con la composition api, o tiene otra forma de acceder a los valores de componente

María Camila Lenis Restrepo

Profesor

Realmente no he probado testeando la composition API, pero debería ser lo mismo porque se testeamos en materia de outputs, no tanto de cómo se están generando los componentes.

Puedes revisar estos ejemplos: https://lmiller1990.github.io/vue-testing-handbook/composition-api.html#the-composition-api parece que se hace de la misma manera

Supongo que lo veremos mas adelante pero,

Cual sería la diferencia y/o ventaja/desventaja de testear el click del counter en este caso vs la ejecución del método?

Hola Irving, Serían dos casos de uso distintos:

Quiero saber que el boton está llamando al método que quiero
Quiero saber que el método está funcionando bien

No hay una ventaja o desventaja realmente, sino usarlo dependiendo de lo que quieras testear.

Wrapper: probando elementos y estados

Progreso del curso

Introducción

Montando un componente

Acciones y mocks

Un paso adicional

Cierre