Предупреждение о неправильном типе

Я пытаюсь использовать 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.

У меня такие же предупреждения (для каждого компонента vuetify) в моем проекте с тех пор, как я обновился до vue 3.4.22, поэтому я временно добавил «silent: true» в свой vitest.config.ts.

Adri 23.04.2024 16:16
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
1
520
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я исправил/подавил это предупреждение, заглушив компонент slide-y-transition. Насколько мне известно, компоненты перехода не влияют на поведение компонентов (они просто обеспечивают некоторый визуальный сахар), поэтому меня не волнует, будут ли они исключены в моих модульных тестах.

Попробуйте заменить код монтирования в фрагменте следующим:

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

Другие вопросы по теме