Want to mock/stub component method in created/mounted lifecycle.

[MushengLiaoDavis]

Hi,

Sometimes, I really need to mock/stub the component method in created/mounted lifecycle.(like callA method). Have any idea to handle this situation ?

wrapper = shallowMount(MyComponent, { global: { }, methods: { callA: sinon.stub() // <- Mock method } });

[cexbrayat]

Hi @MushengLiaoDavis

You can read the comments in this thread to give you an idea on how we usually do it: #775 (comment)

Feel free to reopen if that's not what you're looking for, but that should help!

[MushengLiaoDavis]

In vue-test-utils v1.x, we can mock(stub) component methods for the created/mouted lifecycle as follows:

SFC (class-style component)

// ignore other code ...
created() {
}

mounted() {
     this.callThirdPartyLib();
}

callThirdPartyLib() {
    // call third-party libaray
}

In test file

// use sinon, chai tool

wrapper = shallowMount(MyComponent, {
      methods: {     // In vue-test-utils 2.x  doesn't support mocking methods while mounting component
        callThirdPartyLib: sinon.stub(),     // Don't want to call this real method, so stub it.
        disableTab: sinon.stub(),
        pageScrollTop: sinon.stub()
      },
      localVue,
      store,
});

it('...', () => {
    expect(wrapper.vm.callThirdPartyLib).to.have.been.calledOnce;
})

vue-test-utils v2.x
I know we can stub the http request action (axios) in created/mounted lifecycle. This behavior is independent (gloabl function or gloabl instance) from component, so they are easy to stub. But in my scenario, just don't want to call real method (callThirdPartyLib) while mounting component.

import axios from 'axios';

sinon.stub(axios, 'get').resolves({
  data: {
            // some data here
        }
})