How to mock method called in `created` Vue lifecycle hook in Jest unit test without using deprecated `methods` param in `shallowMount`?

Question

NOTE: the linked "duplicate" question & answer does NOT answer my question, please vote to reopen or otherwise explain why this has been closed in comments

I have a created() hook that calls doSomething() method. I can get the tests to pass by passing the methods param to shallowMount() and overiding with jest.fn().

However when I take this approach I receive the deprecation warnings regarding methods:

console.error
[vue-test-utils]: overwriting methods via the `methods` property is deprecated and will be removed in 
the next major version. There is no clear migration path for the `methods` property - Vue does not 
support arbitrarily replacement of methods, nor should VTU. To stub a complex method extract it from 
the component and test it in isolation. Otherwise, the suggestion is to rethink those tests.

TestComponent.Vue:

...

created() {
    doSomething();
}

...

methods: {
    doSomething(): void { /* do something */ }
}

TestComponent.test.ts:

// mounting method used for tests
function genMount() {
    const doSomething = jest.fn();
    const el = document.createElement('div');
    document.body.appendChild(el);

    return shallowMount(TestComponent, {
        localVue,
        methods: { doSomething },  // deprecated param
        store,
        mocks,
        attachTo: el,
        stubs
    });
}

How can I mock the method called in the created() hook without passing methods to shallowMount() to resolve the deprecation warnings?

Alternatively, is there a way to either mock or bypass the created() lifecycle hook?

Per the warning suggestion, I realize I could import the method and mock it for tests but I am looking for an alternative especially in cases where that would be overkill.

Answer 1

Wow, I didn't even know this was deprecated. This is the way I have been testing methods called during mounted too, so here is what I found. Personally I'll go with the first option going forward.

If you're willing to change your testing philosophy but not your coding style:

I guess the solution is to not test if those methods are called, but if their effects are applied. That's all good, until you deal with the DOM (where Jest/JSDOM in some cases severely lacks functionality).

Source

Else, if you're willing to change your coding style but not your testing philophy:

One immediately work around that comes to mind (maybe not ideal) would be to put said method in another file and import it. Then you could use jest.mock.

Source

Someone else recommended silencing the errors:

import { config } from '@vue/test-utils';

config.showDeprecationWarnings = false;

...But I think that could cause more problems than it would fix. If not now, then later. Unless your project decides to never update to newer Vue versions I suppose?

These are the only solutions I was able to dig up. I wish I could have found a better answer. It would be nice if we could pause somewhere between created and mounted and mock a method, but I'm not even sure whether the methods object exists at that point and I don't know how to find out.