How to write Vue test cases for Vue method in a component using vue-test-utils and jest which has store dispatch function

Question

i am writing jest test cases for my vue component i have a method which calls store dispatch function

dismissed() {
      this.$store.dispatch("alert/hideAlert");
},

in the test cases i am triggering the dismissed event like below and expecting the store action method to call

 wrapper.vm.dismissed();
 await wrapper.vm.$nextTick();
 expect(actions.hideAlert).toHaveBeenCalled();

but the dismissed method call "wrapper.vm.dismissed();" throws below error while running test cases

Cannot read property 'dispatch' of undefined

How can i test this this vue method ?

Answer 1

I think this is the simplest way to do it.

const mockStore = { dispatch: jest.fn() }
const wrapper = shallowMount(YourComponent, {
   mocks: {
      $store: mockStore
   }
}

wrapper.vm.dismissed();
await wrapper.vm.$nextTick();
expect(mockStore.dispatch).toHaveBeenCalledWith('alert/hideAlert');

But you can also do it in different ways. Check this article