Vue-test-utils中如何mock VueX内action的返回值

核心错误点 #

• 命名空间配置不匹配：你在组件中调用的是带命名空间前缀的global/getDataFromAPI，但测试代码里给global模块配置了namespaced: false，此时mock的action会被注册到全局命名空间下，带global/前缀的dispatch请求匹配不到mock的action，就会 fallback 到真实的store逻辑。
• dispatch未加await：this.$store.dispatch返回的是Promise对象，你没加await的情况下拿到的response是Promise实例，不是接口返回值，也会导致后续赋值逻辑失效。
• store注入方式错误：Vue Test Utils提供了专门的store配置项用于传入Vuex实例，不需要放到mocks里，错误的注入方式会导致组件拿到的不是你构造的mock store。

修正后的代码 #

组件代码调整 #

methods: {
    async getData() {
        // 新增await等待dispatch执行完成
        const response = await this.$store.dispatch("global/getDataFromAPI")

        if (!response) return

        this.$data.data = {...response.data}
    }
}

测试代码调整 #

describe('Component.vue', () => {
  let localVue;
  let vuetify;
  let wrapper;
  let store;

  beforeEach(() => {
    localVue = createLocalVue();
    localVue.use(Vuex)
    vuetify = new Vuetify();

    let globalActions = {
      getDataFromAPI: async () => {
        return {
          status: 200,
          data: {
            information1: "ABC",
            information2: 123,
          }
        }
      } 
    }

    store = new Vuex.Store({
      modules: {
        global: {
          actions: globalActions,
          // 修改为true开启命名空间，和组件调用的前缀匹配
          namespaced: true
        },
      }
    })

    wrapper = mount(Component, {
      localVue,
      vuetify,
      attachTo: div,
      // 直接用顶层store配置项传入mock store
      store,
      mocks: {
        $t: () => { },
      },
    });
  });

  it('Data is set correctly', async () => {
    await wrapper.vm.getData();

    const dataInformation1 = wrapper.vm.$data.data.information1;
    expect(dataInformation1).toBe("ABC")
  });
})

内容的提问来源于stack exchange，提问作者J.Stoltz