Search code examples
vue.jsjestjsvuexvue-test-utils

How do I test the call on a Vuex Mutation in a Vue component?


Say you have a vue component with a method like this:

methods:{
    doSomething(someParameter){
       //maybe do something with that Parameter 
       this.$store.commit("storeSomething",someParameter);

       let someParameter2 = this.transformToSth(someParameter);
       this.$store.commit("storeSomethingElse",someParameter2);
    }
}

What do I have to do, so that this kind of test works in Jest?

test("that the commit was correctly called",()=>{
     wrapper.vm.doSomething(someParameter);
     expect(wrapper.vm.$store.commit).hasBeenCalledWith(someParameter);

     expect(wrapper.vm.$store.commit).hasBeenCalledWith(someParameter2);
})

Also note that I want that the mock is also reverted again, so that method uses the same implementation as before. Otherwise, I create a dependency between tests, which I very much like to avoid.

(I also do hope it works the same way with actions and getter Functions)


Solution

  • So I found that one can solve this with spyOn:

       test("that the commit was correctly called", () => {
            let spy = jest.spyOn(userCardEditingWrapper.vm.$store, "commit");
            wrapper.vm.doSomething("test");
            expect(spy).toHaveBeenCalledWith("storeSomething", someParameter);
            expect(spy).toHaveBeenCalledWith("storeSomethingElse", someParameter2);
          });
    

    Credit to @devTea from the Vue Discord Channel that gave me the hint with jest.fn().