如何监视 vuex 订阅者中的方法？

Posted 2023-02-22

【中文标题】如何监视 vuex 订阅者中的方法？

【英文标题】：How do I spy on Methods in a vuex subscriber?

【发布时间】：2021-07-22 14:59:00

【问题描述】：

在 Vue 组件的 created() 中，我有一个订阅 Vuex 商店的 Mutation 的订阅者。 我试图监视触发订阅者时调用的方法。 这是我的第一次直观尝试：

//Vue-Component
created()
     this.$store.subscribe((mutation) => 
      if (mutation.type === "mutationname") 
        this.methodToBeSpiedOn();
      
    );


//jest
import Component from "..."; 
...
const setSelectedCompanySpy = jest.spyOn(
    Component.methods,
    "methodToBeSpiedOn"
);
componentwrapper.vm.$store.commit("mutationname") 
expect(methodToBeSpiedOn).toBeCalled();

现在我想，可能是因为 Reactivity 并且测试需要更多时间来触发订阅者等等。

所以我尝试使用 setTimeout()：

setTimeout(() => 
     expect(methodToBeSpiedOn).toBeCalled();
     done();
, 10000);

但这也不起作用。

所以我的问题是：如何监视在 Vuex 订阅者中调用的方法？

或者我的方法完全错误，我不应该这样测试订阅者？

【参考方案1】：

spyOn 上的Component.methods 可能不起作用，因为vm 是分配组件方法的主要对象。

使用vm，如以下示例：

const setSelectedCompanySpy = jest.spyOn(
    componentwrapper.vm,
    "methodToBeSpiedOn"
);

expect(setSelectedCompanySpy).toBeCalled();

【讨论】：

我有 2 个问题： 1. 假设您测试创建的 Lifecyclehook。在这种情况下，我监视的函数将在 componentwrapper.vm 存在之前执行。在这种情况下我该怎么办？因为我尝试了您的方法，但测试仍然失败。 2. 我将 Component.methods 用于 spyon 工作正常的非订阅者案例。

@telion 完成创建的生命周期，您可以使用await wrapper.vm.$nextTick()，然后添加您的expect