Why Doesn't Jest.spyon() Sometimes Work On A Vue Component's Method?

I see the changes the method makes as event handler, but jest.spyOn(wrapper.vm, 'methodName') doesn't catch the call in major cases, but in some tests it somehow works. I suspect a

Solution 1:

The difference between logOut and showLogOutModal methods is how they are used.

logOut is called as regular method:

this.logOut();

And showLogOutModal is passed as a callback:

  <v-btn
    v-if="isLoggedIn"class="button-log-out"
    text
    @click="showLogOutModal"

this.showLogOutModal is mocked with jest.spyOn after this.showLogOutModal is read to to be used as event handler, so a spy doesn't affect anything.

This would likely be fixed by forcing a re-render after replacing wrapper.vm.showLogOutModal with a spy:

const mockedShowModalMethod = jest.spyOn(wrapper.vm, 'showLogOutModal');
await wrapper.vm.$forceUpdate();

But a workaround listed in the question is the recommended way to do this:

const mockedShowModalMethod = jest.spyOn(Header.methods, 'showLogOutModal');
const wrapper = createWrapper(Header);