Wrapper: probando elementos y estados
Clase 8 de 14 • Curso de Unit Testing en Vue.js 3
Contenido del curso
Uriel Solis Salinas
student•
hace 3 años
Clase 8 de 14 • Curso de Unit Testing en Vue.js 3
Contenido del curso
Uriel Solis Salinas
Irving Caamal
victor rodriguez
María Camila Lenis Restrepo
Irving Caamal
María Camila Lenis Restrepo
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 a una propiedad const propValue = wrapper.vm.myProp; // Modificar una propiedad wrapper.vm.myProp = 'new value';
// Llamar a un método sin argumentos wrapper.vm.myMethod(); // Llamar a un método con argumentos wrapper.vm.myMethod('arg1', 'arg2');
// Disparar un evento en el componente Vue wrapper.vm.$emit('my-event', eventData);
// Acceder al estado del componente Vue const myState = wrapper.vm.$data.myState;
// 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.
La doc de la API de Wrapper para vue-test-utils
pregunta el wraper funciona de la misma manera con la composition api, o tiene otra forma de acceder a los valores de componente
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:
No hay una ventaja o desventaja realmente, sino usarlo dependiendo de lo que quieras testear.