Event not being caught on child component?

It seems that when I do a dispatch() on a vue-component that is a child element of the component I’m testing, the event is either not fired at all or not caught by the vue event handler.

If I replace the ui-navigation-level component with a simple div, the event is caught.

This is the component (stripped to bare functionality):

<template>
    <ul class="ui-navigation">
        <ui-navigation-level
            :options="options"
            @select="handleSelect"
        ></ui-navigation-level>
    </ul>
</template>

<script>
    import NavigationLevel from './ui-navigation-level.vue'

    export default {
        name: 'ui-navigation',

        props: {
            options: {
                type: Array,
                required: true,
            },
        },

        components: {
            'ui-navigation-level': NavigationLevel,
        },

        methods: {
            handleSelect(option) {
                this.$emit('select', option)
            },
        },
    }
</script>

And the test:

it('handles the select event', () => {
    const handleSelect = sinon.spy(Navigation.methods, 'handleSelect')

    const wrapper = mount(Navigation, {
        propsData: {
            options: [
                /* ... */
            ],
        },
    })

    wrapper.find('.ui-navigation-level')[0].dispatch('select')

    expect(handleSelect).to.be.calledOnce //Result: called 0 times
})

[mattixittam]

Yup, when finding using the component object, it works!

Hmm, found the (an) issue, I think. This returns undefined:

wrapper.find('.ui-navigation-level')[0].isVueComponent

[eddyerburgh]

Hmm, found the (an) issue, I think. This returns undefined: wrapper.find(‘.ui-navigation-level’)[0].isVueComponent

Vue components and DOM nodes are treated differently. If you use a DOM selector, it will return a vnode - not a vue instance.