如何模拟 VueJs 组件的“挂载”方法？答案

【问题标题】：how to mock 'mounted' method of VueJs component?如何模拟 VueJs 组件的“挂载”方法？
【发布时间】：2021-09-16 04:22:48
【问题描述】：

提前感谢您的帮助。

mounted() method 如何模拟测试？

组件是这样的：

export default {
    
    name: 'ShowToDo',
    ...
    mounted(){
        this.$store.dispatch('download_todo')
    },
    ...
}

相反，组件测试是：

  const localVue = createLocalVue()
        localVue.use(Vuex)
        wrapper = mount(ShowToDo, {
            store,
            localVue,
            mounted(){}
            }
        )
    })

似乎mounted(){}被忽略了，因为测试尝试执行this.$store.dispatch('download_todo')。

提前致谢。

【问题讨论】：

这能回答你的问题吗：stackoverflow.com/questions/55746890/… ?

标签： vue.js unit-testing jestjs vuex vue-test-utils

【解决方案1】：

抱歉，您不能模拟 Vue 生命周期钩子。

来源：vue-test-utils issue #166

虽然它模拟了您的商店，但您可以做什么。您可以提供一个自定义的 download_todo 声明操作，而不是使用您的真实商店。

所以mounted 钩子将运行并调度download_todo 操作，但这将是一个自定义的:)

import { state, mutations, getters, actions } from '../store'

const downloadActionMock = jest.fn()
const store = new Vuex.Store({
  state,
  mutations,
  getters,
  actions: {
    ...actions, // Use the real actions
    download_todo: downloadActionMock // Override some of them
  }
})

wrapper = mount(ShowToDo, {
    store,
    localVue,
  }
)

expect(downloadActionMock).toHaveBeenCalled()

【讨论】：

我在methdos里面的init函数中移动了this.$store.dispatch('download_todo')，然后我mock了这个方法。

【解决方案2】：

您不能断言生命周期挂钩已被调用，但您可以断言 $store.dispatch 已被调用。我建议你根本不要使用真正的Vuex store。最佳实践之一是分别模拟组件中的 $store 对象来测试商店。使用模拟 $store，您不仅可以检查操作是否已分派，还可以检查它是使用哪些参数分派的：


const wrapper = mount(ShowToDo, {
   mocks: {
     $store: {
       dispatch: jest.fn()
     }
   },
})
expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('download_todo')

【讨论】：