Я пытаюсь использовать Vitest в проекте Nuxt3 + Vuetify3. Я пытаюсь начать с простого, поэтому пока что мой единственный тест — это монтирование компонента. Однако тест пройден, он всегда выдает огромное предупреждение, и я хотел бы понять, в чем проблема и можно ли ее исправить. Вот мой компонент:
<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>
Вот мой тестовый файл:
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();
})
И вот предупреждение, которое оно выдает при запуске теста:
[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>
В чем может быть проблема? Мой файл конфигурации Vitest объявляет тестовую среду только как Nuxt.
Я исправил/подавил это предупреждение, заглушив компонент slide-y-transition
. Насколько мне известно, компоненты перехода не влияют на поведение компонентов (они просто обеспечивают некоторый визуальный сахар), поэтому меня не волнует, будут ли они исключены в моих модульных тестах.
Попробуйте заменить код монтирования в фрагменте следующим:
const component = mount(MyComponent, {
global: {
plugins: [vuetify],
stubs: {
SlideYTransition: {
template: '<div><slot /></div>'
}
}
},
})
У меня такие же предупреждения (для каждого компонента vuetify) в моем проекте с тех пор, как я обновился до vue 3.4.22, поэтому я временно добавил «silent: true» в свой vitest.config.ts.