Компонент:
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<script setup>
defineProps({
items: {
type: Array,
default: () => []
}
});
</script>Задание:
Передайте items = [{ id: 1, name: 'Яблоко' }, { id: 2, name: 'Апельсин' }] и проверьте, что отображаются оба элемента.
import { mount } from '@vue/test-utils';
import { describe, it } from 'vitest';
import Vfor from '@/components/Vfor.vue';
describe('Vfor', () => {
it('проверка переданных элдементов', () => {
const props = [{ id: 1, name: 'Яблоко' }, { id: 2, name: 'Апельсин' }];
const wrapper = mount(Vfor, {
props: {
items: props
}
});
const items = wrapper.findAll('li');
expect(items).toHaveLength(2);
items.forEach((item, index) => {
expect(item.text()).toBe(props[index].name)
})
})
})toHaveLength - Проверяет свойство .length значения.
Пример использования - expect(value).toHaveLength(number)
В данном решении применено тестирование с использованием цикла.
Изначально мы определили массив элементов который будем прокидывать в компонент, затем этот массив используем для проверки.