Unable to mock lifecycle hooks

[wtho]

What problem does this feature solve?

The test author is currently not able to remove the lifecycle-hook implementation from components. The hooks are:

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed
• activated
• deactivated

What does the proposed API look like?

The Mock Object in the options object can be used:

mount(TestedComponent, {
  mocks: {
    mounted() {
      console.log('This is the mocked mounted hook!')
    }
  }
})

[eddyerburgh]

I don't think we're going to go ahead with this, as we want to avoid editing the internals. Thanks for the PR though 🙂

[DenniLa2]

This not work for me =(
https://codesandbox.io/s/4031x2r769
tell me what I did wrong?

[eddyerburgh]

mock doesn't mock lifecycle hooks. To add lifecycle hooks, you could create a mixin:

const mixin = {
  beforeCreate() {
    // do something
  }
}

mount(TestComponent, {
  mixins: [mixin]
})

Or using localVue:

const mixin = {
  beforeCreate() {
    // do something
  }
}

localVue = createLocalVue()
localVue.mixin(mixin)

mount(TestComponent, {
  localVue
})

[aldarund]

But mixins for hooks don't get overridden , they got merged and both hook will be called, so this won't work

[DenniLa2]

Thanks, @aldarund ! Yes, this is a very important point.
It turns out that hooks can not be mocked?

[trutherford2388]

To add to this, One of my components has,

created() { Event.$emit('editRow', this.rowIndex); }
and when performing a shallowMount, it fails stating that Event.$emit is not a function.

How can I get around this when the only thing I need to do for this component is create a snapshot?

[z0gSh1u]

I've tried a really hacky work-around:

• create a localVue
• overwrite config.optionMergeStrategies for the hook you wanna mock, let the mixin one to override instead of merge into the original one
• mixin your own lifecycle hook
• mount your component using that localVue

[alecgerona]

Got a sample snippet @z0gSh1u?

[alecgerona]

Imho adding this feature will make vue-test-utils really, really powerful as you will be able to decouple dependencies/globals/or what have you from the components and mock them normally. This is most useful in Nuxt with loads of modules.

[dobromir-hristov]

You can just use lodash merge, to overwrite the hook, before you mount it. Ofc that won't work for setup or hook:event listeners, but you should not really do such mocking that often anyways.

[alecgerona]

@dobromir-hristov, I'll try. As I said, my use case is that I have a Nuxt module, $recaptcha in this case, that is called on mounted(). I can't seem to be able to mock it whether I put it in it's own method or not. So I'd rather to skip the mounted() step altogether.

[antman888]

How about spying on and overriding the implementation before mounting?

import myComponent from '@/components/myComponent'

it('doesn't call created', () => {
  jest.spyOn(myComponent, 'created').mockImplementation(() => {
    console.log("mocked")
  })
  const wrapper = mount(myComponent)
  ...
  myComponent.created.restoreMock()
})

[roger-ngx]

@antman888 thanks bro. that's what i'm looking for.