Тестирование рендеринга списков

Рендеринг списков в Vue часто реализуется через директиву v-for, которая позволяет динамически создавать элементы интерфейса на основе массива данных. Тестирование таких компонентов требует проверки не только корректного отображения элементов, но и правильной реакции на изменения данных.

Монтирование компонента и доступ к элементам

Для начала необходимо импортировать Vue Test Utils и монтировать тестируемый компонент:

import { mount } from '@vue/test-utils'
import ItemList from '@/components/ItemList.vue'

const items = ['яблоко', 'банан', 'апельсин']

const wrapper = mount(ItemList, {
  props: { items }
})

Метод mount создаёт полноценный экземпляр компонента с доступом к DOM и внутреннему состоянию. После монтирования можно обращаться к элементам списка с помощью методов find и findAll.

Проверка количества элементов списка

Наиболее базовый тест — проверка, что количество отрендеренных элементов соответствует длине массива:

expect(wrapper.findAll('li')).toHaveLength(items.length)

findAll возвращает коллекцию всех подходящих элементов, что позволяет не только проверять их количество, но и итерировать для проверки содержимого.

Проверка содержимого элементов

Для проверки корректного текста в каждом элементе:

wrapper.findAll('li').forEach((liWrapper, index) => {
  expect(liWrapper.text()).toBe(items[index])
})

Такой подход гарантирует, что порядок элементов и их значения совпадают с исходным массивом.

Тестирование реактивности при изменении данных

Vue обеспечивает реактивное обновление DOM при изменении данных. Для проверки этого используется обновление пропсов или данных компонента:

await wrapper.setProps({ items: ['груша', 'киви'] })
expect(wrapper.findAll('li')).toHaveLength(2)
expect(wrapper.findAll('li')[0].text()).toBe('груша')

Метод setProps автоматически вызывает реактивный ререндер компонента, что позволяет тестировать динамические изменения списка без необходимости полностью перезагружать компонент.

Обработка пустых и неопределённых массивов

Важно проверять поведение компонента при пустых данных или отсутствии пропса:

await wrapper.setProps({ items: [] })
expect(wrapper.findAll('li')).toHaveLength(0)

Это гарантирует, что компонент корректно реагирует на отсутствие данных, не вызывая ошибок рендеринга.

Тестирование ключей (`key`) в списках

Использование :key в v-for критично для оптимального обновления DOM. Тестирование может включать проверку того, что ключи соответствуют уникальным идентификаторам элементов:

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

const items = [{ id: 1, name: 'яблоко' }, { id: 2, name: 'банан' }]
const wrapper = mount(ItemList, { props: { items } })
const liWrappers = wrapper.findAll('li')
expect(liWrappers[0].attributes('key')).toBe('1')
expect(liWrappers[1].attributes('key')).toBe('2')

Корректные ключи предотвращают неправильное обновление элементов при изменении массива.

Тестирование взаимодействий с элементами списка

Если элементы списка включают интерактивные элементы (кнопки, ссылки, чекбоксы), проверяется их функциональность:

<li v-for="item in items" :key="item" @click="selectItem(item)">{{ item }}</li>

const selectSpy = vi.fn()
const wrapper = mount(ItemList, {
  props: { items },
  methods: { selectItem: selectSpy }
})

await wrapper.findAll('li')[1].trigger('click')
expect(selectSpy).toHaveBeenCalledWith('банан')

Метод trigger позволяет имитировать пользовательские события, проверяя корректное взаимодействие с DOM.

Тестирование больших списков и производительности

Для массивов с сотнями элементов важно убедиться, что тесты остаются стабильными и не замедляют процесс. Можно проверять лишь выборочные элементы или ключевые позиции, а не весь список:

expect(wrapper.findAll('li')[0].text()).toBe('первый элемент')
expect(wrapper.findAll('li').at(-1).text()).toBe('последний элемент')

Это обеспечивает уверенность в корректности рендеринга без перегрузки тестового процесса.