Wrapper: probando elementos y estados

Clase 8 de 14 • Curso de Unit Testing en Vue.js 3

Clase anteriorSiguiente clase

Irving Caamal

student•

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

Uriel Solis Salinas

student•

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.

// 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');

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

victor rodriguez

student•

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

teacher•

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

Irving Caamal

student•

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?

María Camila Lenis Restrepo

teacher•

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.