Компонент:
<template>
<input v-model="inputValue" type="text" />
<p>{{ inputValue }}</p>
</template>
<script setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>
Задание:
Проверьте, что при вводе текста в input, он отображается в <p>.
import { mount } from '@vue/test-utils';
import { describe, it } from 'vitest';
import Input from '@/components/Input.vue';
describe('Input.vue', () => {
it('при вводе текста в input, он отображается в <p>', async () => {
const wrapper = mount(Input);
const input = wrapper.get('input');
await input.setValue('Hello world');
expect(wrapper.find('p').text()).toBe('Hello world');
})
})
wrapper.get - получает элемент и если не находит - выдаст ошибку, в то время как wrapper.find - ошибки не выдаст.