Vue开玩笑测试激活的生命周期

Question

所以我在使用jest和vue-test-utils来测试具有激活生命周期的组件时遇到问题，例如，我的组件具有这样的激活钩子

activated() {
  console.log('activated')
  this.activatedData = true
}

执行shallowMount后不会触发

const wrapper = shallowMount(MyComponent, { localVue })
expect(wrapper.vm.activatedData).toBe(true) // failed because it still false

那我该如何测试激活的生命周期？

Answer 1

激活的生命周期挂钩触发器仅在保持活动状态的组件上触发。 https://vuejs.org/v2/api/#activated

对于非保持活动状态的组件，请改为使用安装。

如果保持活动组件，请记住在服务器端渲染期间不会调用该组件。如果不是这种情况，请提供其他信息

Answer 2

您可以通过以下方式调用activated()钩子：

wrapper.vm.$options.activated[0].call(wrapper.vm)

看起来很hacky，但我没有找到其他方法。

• wrapper.vm.$options.activated是一个数组，因此您需要访问第一个元素
• 然后，您必须使用call(wrapper.vm)来设置上下文（this变量），以便在组件上调用它，并且可以访问其方法，数据等。

此解决方案对@vue/test-utils 1.1.1有效。我不会认为它特别安全可靠，因为它不使用公共API，因此在某些时候它可能会停止工作。 还是总比没有好。