Vue jest test activated lifecycle

Question

So i have a problem using jest and vue-test-utils to test my component with activated life cycle, for example i have component with activated hook like this

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

it will not be triggered after i executed shallowMount

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

how do i test the activated life cycle then?

yjohn yjohn · Accepted Answer · 2020-11-23T09:53:46

You can call the activated() hook this way:

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

Looks hacky, but I haven't found any other way.

wrapper.vm.$options.activated is an array, so you need to access the first element
then you have to use call(wrapper.vm), to set the context (this variable), so it's called on your component and it can access its methods, data, etc.

This solution is valid for @vue/test-utils 1.1.1. I wouldn't consider it particularly safe and reliable, because it does not use the public API, so at some point it may stop working. It's still better than nothing though.

Vue jest test activated lifecycle

2 Answers