Warning about wrong type

Question

I'm trying to use Vitest in a Nuxt3 + Vuetify3 project. I'm trying to start really simple, which is why my only test so far is mounting a component. The test passes, however, it's always throwing a huge warning and I would like to understand what the issue is and if it's fixable. Here is my component:

<template>
    <v-autocomplete :items="items" />
</template>

<script setup lang="ts">
const items = [
    { title: 'Test 1', value: 'test1' },
    { title: 'Test 2', value: 'test2' },
    { title: 'Test 3', value: 'test3' }
]
</script>

Here is my test file:

import MyComponent from './MyComponent.vue';
import { mount } from '@vue/test-utils';
import { expect, it } from 'vitest'
import { createVuetify } from 'vuetify'
const vuetify = createVuetify()

it('can mount some component', async () => {
    const component = mount(MyComponent, {
        global: {
            plugins: [vuetify]
        },
    })
    expect(component.exists()).toBeTruthy();
})

And here is the warning it's throwing when running the test:

[Vue warn]: Wrong type passed as event handler to onLeave - did you forget @ or : in front of your prop?
    Expected function or array of functions, received type string.
at <TransitionGroup name="slide-y-transition" css=true onBeforeEnter=fn<onBeforeEnter>  ... >
at <SlideYTransition leaveAbsolute=true group=true tag="div"  ... >
at <MaybeTransition transition= {
    component: {
        name: 'slide-y-transition',
        props: {
            disabled: [Object],
            group: [Object],
            hideOnLeave: [Object],
            leaveAbsolute: [Object],
            mode: [Object],
            origin: [Object],
            _as: [Function: String]
},
setup: [Function: setup],
_setup: [Function: setup],
filterProps: [Function: filterProps]
},
leaveAbsolute: true,
    group: true
} tag="div" class="v-messages"  ... >
at <VMessages id="input-0-messages" active=false messages= [] >
    at <VInput ref=Ref< undefined > modelValue="" onUpdate:modelValue=fn<onUpdate:modelValue>  ... >
at <VTextField ref=Ref< undefined > autofocus=false counter=false  ... >
at <VAutocomplete items= [
        { title: 'Test 1', value: 'test1' },
        { title: 'Test 2', value: 'test2' },
        { title: 'Test 3', value: 'test3' }
    ] >
    at <MyComponent ref="VTU_COMPONENT" >
    at <VTUROOT>

What could the issue be? My Vitest config file is only declaring the test environment as Nuxt

Answer 1

I fixed/suppressed this warning by stubbing the slide-y-transition component. As far as I know, the transition components have no effect on component behaviour (they just provide some visual sugar), so I don't care if they're stubbed out in my unit tests.

Try replacing the mounting code in your snippet with the following:

    const component = mount(MyComponent, {
        global: {
            plugins: [vuetify],
            stubs: {
                SlideYTransition: {
                    template: '<div><slot /></div>'
                }
            }
        },
    })