Testing Hooks on Vue 2 (or Options API)

Have you ever spent hours thinking how could you test a method called on mount?
First lets say we have this component:

export default { name: 'MyCustomComponent', mounted() { this.calledOnMount() }, methods: { calledOnMount() {} } } 

We want to make sure the calledOnMount will be called, using @vue/test-utils and vitest/jest there are two main ways to test validate it:

• toHaveBeenCalled
• toBeCalled

But the work with a spy function and usually we write tests like this:

import { mount } from '@vue/test-utils' import MyCustomComponent from '../MyCustomComponent.vue' describe('MyCustomComponent.vue', () => { const wrapper = mount(MyCustomComponent) spyOn(wrapper.vm, 'calledOnMount') }) 

When calling the mount it already runs the mounted lifecicly, so, even adding a spy it will always fail.

• toHaveBeenCalled -> we can't intercept the mount proccess to add a spy on here
• toBeCalled -> the function has already be called

But calm down, there is a way to test it, for sure!
We had to bind the spy by accessing the .vue component and its options.methods such:

import MyCustomComponent from '../MyCustomComponent.vue' type MyCustomComponentType = { options: { methods: { calledOnMount: () => void } } } vi.spyOn( (MyCustomComponent as unknown as MyCustomComponentType).options.methods, 'calledOnMount' ) 

This way you dont have to intercept the wrapper functions, but the component signature function.
Once the mounted component is like a new "instance" of a "class" component, the spy we add on the .vue, will also works with the mounted component on test.

describe('MyCustomComponent.vue', () => { const wrapper = mount() it('Should remove scroll event listener on destroy', async () => { expect( (MyCustomComponent as unknown as MyCustomComponentType).options.methods .calledOnMount ).toHaveBeenCalled() }) }) 

Now you can easy test your functions and everything you do on mount.