Vue test utils - Тестирование компонента с watch

vue test utils - тестирование v-model

<template>
  <p>{{ message }}</p>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  value: Number
});

const message = ref('');

watch(
  () => props.value,
  (newVal) => {
    if (newVal > 10) {
      message.value = 'Больше 10';
    } else {
      message.value = 'Меньше или равно 10';
    }
  },
  { immediate: true }
);
</script>

Задание:

Задание: Проверьте, что при value=5 отображается "Меньше или равно 10", а при value=15 — "Больше 10".

Решение:

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

describe('Watch.vue', () => {
    it('при value=5 отображается "Меньше или равно 10"', () => {
        const wrapper = mount(Watch, {
            props: {
                value: 5
            }
        });
        expect(wrapper.find('p').text()).toBe('Меньше или равно 10')
    });
    it('при value=15 отображается "больше 10"', () => {
        const wrapper = mount(Watch, {
            props: {
                value: 15
            }
        });
        expect(wrapper.find('p').text()).toBe('Больше 10')
    })
})

Можно еще вот так сделать:

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

describe('WatchComponent.vue', () => {
  it('отображает сообщение в зависимости от value', () => {
    const wrapper = mount(WatchComponent, {
      props: { value: 5 }
    });
    expect(wrapper.text()).toBe('Меньше или равно 10');

    wrapper.setProps({ value: 15 });
    expect(wrapper.text()).toBe('Больше 10');
  });
});