Как протестировать vue компонент на открытие модального окна через vitest?
Подскажите, пожалуйста, как можно протестировать на открытие модального окна в родительском компоненте? В родительском компоненте присутствует дочерний компонент с модальным окном, оно окрывается по условию v-if. Проблема заключается в том, что при написании теста и проверки на открытие всегда выдаёт ошибку, тест:
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { shallowMount } from '@vue/test-utils'
import { createTestingPinia } from '@pinia/testing'
import MainView from '@/views/MainView.vue'
describe('MainView.vue', () => {
let wrapper: any
const client = {
id: 1,
firstName: 'test',
secondName: 'testov',
thirdName: 'testovich',
fullName: 'testov test testovich',
date: {
newDate: new Date(),
nowDate: Date.now()
},
edit: {
newEdit: new Date(),
nowEdit: Date.now()
},
contacts: [
{
block: {
name: 'component'
},
selectValue: '',
inputValue: ''
}
],
newdCreateDate: 'today',
newEditDate: 'today'
}
beforeEach(() => {
wrapper = shallowMount(MainView, {
global: {
plugins: [
createTestingPinia({
createSpy: vi.fn,
initialState: {
client: {
clientsData: [client]
}
}
})
]
}
})
})
it('openning modal window add', async () => {
expect(wrapper.find('.modal').exists()).toBe(false)
await wrapper.find('#add').trigger('click')
expect(wrapper.find('.modal').exists()).toBe(true)
})
})
Часть родительского компонента:
//MainView.vue
<template>
<ModalWindowAdd v-if="isModalAddVisible" :clients="useClients" />
</template>
<script setup lang="ts">
const isModalAddVisible = ref(false);
</script>
В чём ошибка?
Ответы (1 шт):
Автор решения: Esm
→ Ссылка
Необходимо было использовать mount
вместо shallowMount
, т.к. shallowMount
удаляет дочерние компоненты из родителя и заменяет их заглушками.