vue test utils - тестирование компонента с v-if

vue test utils -Тестирование компонента с v-if

Компонент:

<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('Скрыто');
    });
})