Actualmente estoy trabajando en una prueba unitaria de un proyecto VueJS y me gustaría crear una prueba my-component.spec.js (con Jest) para un my-component.vue que usa un servicio myService con la opción de inject . La prueba en sí no es importante. Se trata sobre todo de aprender a simular correctamente un componente que utiliza un servicio. Después de investigar mucho, traté de escribir mi prueba que creo que está en el camino correcto, pero parece que no puedo hacer que funcione por completo. Aquí está el código con 3 console.log en el archivo de prueba:
mock.js (archivo que contiene un método simulado del servicio myService ):
export default function getAllInfos() { return [ {"id": "myId", "name": "myName"} ]; } my-component.spec.js :
import {mount} from "@vue/test-utils"; import MyComponent from "./my-component.vue"; import getAllInfos from "./mock"; describe("MyComponent", () => { it("returns the correct value for getAllInfos() method", () => { const wrapper = mount(MyComponent, { "provide": { myService() { return { "mock": { "getAllInfos": getAllInfos() } }; }, }, data() { return { "infos": [] }; } }); console.log("getAllInfos = ", wrapper.vm.$options.provide.myService().mock.getAllInfos); const test = wrapper.vm.$options.provide.myService().mock.getAllInfos; console.log("test = ", test); wrapper.setData({"infos": test}); console.log("infos = ", wrapper.vm.$options.data().infos); expect(wrapper.vm.$options.data().infos).toEqual([ {"id": "myId", "name": "myName"} ]); }); }); Creo que estoy en el camino correcto porque cuando ejecuto el npm run test:unit , los primeros 2 console.log devuelven el resultado esperado:
getAllInfos = [{id: 'myId', name: 'myName'}] test = [{id: 'myId', name: 'myName'}] Sin embargo, el 3er console.log me parece extraño:
infos = [] Esto significa que los datos de infos no están asignados por la constante de test , cuyo contenido es correcto.
¿Alguien tiene una solución para este problema?
Si echa un vistazo más de cerca a los documentos ( setData | Vue Test Utils ), entonces puede ver una pequeña pero significativa diferencia en su código:
// your code: /* ... */ it("returns the correct value for getAllInfos() method", () => { /* ... */ wrapper.setData({"infos": test}); /* ... */ }); /* ... */ // code in docs: /* ... */ test('setData demo', async () => { /* ... */ await wrapper.setData({ foo: 'bar' }) /* ... */ }) Sí, la diferencia es que en los documentos, la prueba es una función async y se espera el setData . Creo que esta es la fuente de tu problema.
También puede intentar (pero esto es un poco una solución):
import { createLocalVue, mount } from "@vue/test-utils"; /* ... */ const localVue = createLocalVue() /* ... */ wrapper.setData({"infos": test}); await localVue.nextTick() /* ... */ Fuente para localVue aquí