vue test utils - тестирование метода и изменения состояния

vue test utils - Тестирование метода и изменения состояния

Компонент:

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

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

Задание:

  • Проверьте, что при клике на кнопку count увеличивается на 1.
  • Проверьте, что при 4х кратном клике на кнопку count = 4.

Решение

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

describe('Increment.vue', () => {
    it('при клике на кнопку count увеличивается на 1', async () => {
        const wrapper = mount(Increment);
        await wrapper.find('button').trigger('click');

        expect(wrapper.find('p').text()).toBe('1');
    });
    it('при 4х кратном клике на кнопку count = 4', async () => {
        const wrapper = mount(Increment);
        for (let i = 0; i < 4; i++) {
            await wrapper.find('button').trigger('click');
        }

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