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

Posted 2023-02-22

【中文标题】如何模拟 VueJs 组件的“挂载”方法？

【英文标题】：how to mock 'mounted' method of VueJs component?

【发布时间】：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')。

提前致谢。

【问题讨论】：

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

【参考方案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')