Testing if the method was called for an event in Vue

Question

I have been trying to write a test to check if a function was called on a tag event in Vue. I have this component(a bit summed up)

<multiselect @tag="fn"></multiselect>

import Multiselect from 'vue-multiselect'
export default {
    components: {
        Multiselect
    },
    name: "TagMultiselect",
    methods: {
        fn(){
            console.log("test");
        }
    }
}

and I am trying to test if the function fn is called. To do this i wrote the following test

it('triggers the function', () => {
        const wrapper = shallowMount(TagMultiselect);
        const spy = jest.spyOn(TagMultiselect.methods, 'fn');
        const multiselect = wrapper.findComponent(Multiselect);
        multiselect.vm.$emit('tag');
        expect(spy).toBeCalledTimes(1)
    })

but everytime i get

Received number of calls: 0

What am I doing wrong?

Answer 1

you need to spy the method of your component like this const spy = jest.spyOn(wrapper.vm, 'fn');