vue test utils - тестирование начального состояния (ref)

Компонент:

<template>
  <div>
    <p>{{ count }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

Задание: Проверьте, что начальное значение count равно 0.

В данном и следующих тестах буду группировать тесты через describe и it.

`describe`

Используется для группировки связанных тестов.

Это контейнер, в который вы помещаете it или test.

Удобно, когда вы хотите структурировать тесты по компонентам, модулям или функциональности.

Решение

import { mount } from '@vue/test-utils';
import { describe, it } from 'vitest';
import Ref from '@/components/Ref.vue';

describe('Ref.vue', () => {
    it('начальное значение count равно 0', () => {
        const wrapper = mount(Ref);

        expect(wrapper.find('p').text()).toBe('0');
    })
})