如何在 Vue 组件中测试对 Vuex Mutation 的调用？

Question

假设您有一个 vue 组件，其方法如下：

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

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

我必须做什么才能让这种测试在 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);
})

另请注意，我希望模拟也再次还原，以便该方法使用与以前相同的实现。否则，我会在测试之间创建依赖关系，我非常想避免这种情况。

（我也希望它能以与操作和 getter 函数相同的方式工作）

Answer 1

所以我发现可以用 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);
      });

感谢来自 Vue Discord 频道的@devTea，它通过 jest.fn() 给了我提示。

如何在 Vue 组件中测试对 Vuex Mutation 的调用？

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

vue.js

jestjs

vuex

vue-test-utils