[Vuejs]-Unit testing vue component

by

0👍

The Vuex actions are scheduled on microtasks after the component has mounted, but your first assertion is run before the first action has resolved.

One solution is to wait until the next micro tick:

const wrapper = shallowMount(MyComponent, { store, localVue })

await wrapper.vm.$nextTick() 👈
expect(actions[ACTION_TYPES.GET_WORKFLOW_TYPES]).toHaveBeenCalled()
await wrapper.vm.$nextTick() 👈
expect(actions[ACTION_TYPES.GET_WORKFLOW_EVENTS_BY_TYPE]).toHaveBeenCalled()

Alternatively, you could wait until the next macro tick at which point the current micro tasks would’ve already completed:

const wrapper = shallowMount(MyComponent, { store, localVue })
await new Promise(r => setTimeout(r)) 👈

expect(actions[ACTION_TYPES.GET_WORKFLOW_TYPES]).toHaveBeenCalled()
expect(actions[ACTION_TYPES.GET_WORKFLOW_EVENTS_BY_TYPE]).toHaveBeenCalled()

demo

Leave a comment