How to stub methods called inside mount hook

[kleinjm]

I'm running into an issue where I can't mock the method called in my mounted() hook and I'm assuming it has to do with the load order.

const myMethod = sinon.stub();
wrapper.setMethods({ myMethod });

I've also tried

    const myMethod = sinon.spy();

    wrapper = mount(ProfileSidebarIndex, {
      methods: { myMethod },
    });

and mocking mounted itself

    const mounted = sinon.stub();

    wrapper = mount(ProfileSidebarIndex, {
      mounted
    });

Is there a way to do this?

[kleinjm]

If it helps, I figured out how to do this without the test utils but then I don't have the wrapper so I'm still stuck here.

    const Constructor = Vue.extend(MyComponent);
    vm = new Constructor();
    sinon.stub(vm, 'myMethod');
    vm.$mount();

[eddyerburgh]

You can pass a methods object:

const myMethod = jest.fn()

wrapper = mount(ProfileSidebarIndex, {
    methods: { myMethod }
});

[kleinjm]

no luck. Looks like this still runs the mounted hook

    const mounted = sinon.stub();
    wrapper = mount(ProfileSidebarIndex, {
      methods: { mounted }
    });

[eddyerburgh]

Do you want to stub the mounted hook, or a method that's called in a mounted hook?

There isn't currently a way to pass stubs to hooks.

[kleinjm]

either would work. Can't seem to get stubbing the mounted hook working any of the ways discussed in this thread

[eddyerburgh]

Can you post a minimal reproduction?

I can successfully stub methods by passing a methods object in the mount options.

[kleinjm]

I too am able to stub a method by passing it to the mount options. However, when that method is used in mounted() on the vue instance, it is not stubbed. I'm assuming this is because mount() (from your library, not to be confused with mounted() from Vue) first creates the vue instance and mounted() gets called before stubbing can happen. Going along with my other examples here, my component has this within the script

    mounted() {
      this.myMethod();
    },
    methods: {
      myMethod() {
        ...
      },
      ...
    },

So to reiterate, I think mounted() is called before subbing myMethod happens. Thanks for all the help so far, let me know if you're unable to see the same issue.

[wtho]

I can confirm the observation made by @kleinjm:

const TestComp = Vue.extend({
  mounted() {
    this.testMethod()
  },
  methods: {
    testMethod() {
      console.log('this is the original test method!')
    }
  }
})

describe.only('TestComp', () => {
  it('should call the original method', () => shallow(TestComp))
  it('should not call the original method', () => shallow(TestComp, { stubs: ['testMethod'] }))
})

This example will print this is the original test method! in both tests. Mocking is no workaround.

[wtho]

To further the discussion about how to mock hooks: Not sure, if this is too hacky, but if we do

const vm = new TestComp()
vm.$options.mounted = [() => console.log('this is the successful mock of mounted')]

before vm.$mount() gets called (so basically when the attributes get applied in create-instance.js), it would work to replace hooks. Either a second stubs/mocks object could be provided, or we go through the stubs and mocks before applying them, filter for hook method names and add them in this different way.

[eddyerburgh]

I think that's a good solution @wtho

Would you like to implement it with a test case like the example you posted

[wtho]

@eddyerburgh yeah, I would like to try. Some points I have in mind/ran into:

• My approach was to just override the current array of all mocked lifecycle-functions, but I just learned that e. g. Vuex does add its own hooks in beforeCreate, so just removing all functions might be the wrong approach. On the other hand I do not have an idea yet how to identify and remove only the function the author intends to override...
• At the time, when mounted will be called, other mocked methods seem to not work (see initial problem of this issue)

[wtho]

Made it work partially:

• A lifecycle method in the mock object is added to the lifecycle-hook array after mount
• If the component contains the lifecycle method, it will be removed before adding the mock
• works currently for
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed
  • activated
  • deactivated
• works not for (mock installation happens too late)
  • beforeCreate
  • created

I will continue to work on it, but I am not sure if I can mock beforeCreate and created at all, would a PR still be accepted?
I also found out, that lifecycle-hooks added via mixins for activated, deactivated and update are not working. Will check on vuejs/vue if it is a known issue.

[eddyerburgh]

Thanks for looking into this @wtho 😀

It seems I really dropped the ball. The stubs option is for components, not methods. It's expected behavior that the example you posted doesn't overwrite the console.log method.

You can make the test pass by add a methods object:

mount(TestComp, { methods: {testMethod: () => {}} })

describe.only('TestComp', () => {
  it('should not call the original method', () => shallow(TestComp, { methods: {testMethod: () => {}}  }))
})

Sorry, I should have seen this earlier.

Lifecycle events

I think we should add support for mocking all lifecycle events, or none.

Even though this issues is called ability to mock lifecycle hooks, the problem was that @kleinjm couldn't stub a method inside mount. This is solved by passing a methods object with a method to override the method called in mount.

I'm renaming this issue. Stubbing lifecycle events should be a separate issue.

Sorry for the confusion.