Компонент:
<template>
<div>
<p v-if="isVisible">Отображается</p>
<p v-else>Скрыто</p>
</div>
</template>
<script setup>
defineProps({
isVisible: Boolean
});
</script>
Задание:
Протестируйте, что при isVisible: true отображается - "Отображается", а при false — "Скрыто".
Решение:
import { mount } from '@vue/test-utils';
import { describe, it } from 'vitest';
import Vif from '@/components/Vif.vue';
describe('Vif.vue', () => {
it('При isVisible: true отображается - "Отображается"', () => {
const wrapper = mount(Vif, {
props: { isVisible: true }
});
expect(wrapper.find('p').text()).toBe('Отображается');
});
it('При isVisible: true отображается - "Отображается"', () => {
const wrapper = mount(Vif, {
props: { isVisible: false }
});
expect(wrapper.find('p').text()).toBe('Скрыто');
});
})