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

Question

感谢您提前提供帮助。

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') 。

提前致谢。

Answer 1

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

来源： vue-test-utils 问题 #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()

Answer 2

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

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