Vue jest 测试激活生命周期

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

你可以这样调用activated()钩子：

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

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

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

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

Answer 2

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

对于非 keep-alive 组件，请改用mounted。

如果是 keep-alive 组件，请记住在服务器端渲染期间不会调用它。如果不是，请提供更多信息