Проверка наличия элементов в DOM

Тестирование компонентов Vue часто начинается с проверки того, что элементы корректно отображаются в DOM. Vue Test Utils (VTU) предоставляет набор методов для рендеринга компонентов и взаимодействия с ними, а также для проверки структуры DOM.

Монтирование компонента

Основной способ работы с компонентом — это его монтирование с помощью функции mount или shallowMount.

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

const wrapper = mount(MyComponent)
  • mount создаёт полноценный компонент с дочерними компонентами.
  • shallowMount рендерит компонент, но заменяет все дочерние компоненты на заглушки, что ускоряет тесты и изолирует проверку.

После монтирования wrapper предоставляет доступ к DOM через методы find, findAll, text, html и другие.

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

1. find и findAll

  • find(selector) — возвращает первый элемент, соответствующий селектору.
  • findAll(selector) — возвращает массив (WrapperArray) всех элементов, соответствующих селектору.
const button = wrapper.find('button')
expect(button.exists()).toBe(true)

const items = wrapper.findAll('.list-item')
expect(items.length).toBe(3)

Ключевой метод для проверки наличия элемента — это exists(). Он возвращает true, если элемент найден, и false, если нет.

2. Поиск по компонентам

Помимо CSS-селекторов, поиск возможен по компонентам:

import ChildComponent from '@/components/ChildComponent.vue'

const child = wrapper.findComponent(ChildComponent)
expect(child.exists()).toBe(true)

Можно также использовать объекты с опцией name или ref:

const refElement = wrapper.find({ ref: 'submitButton' })
expect(refElement.exists()).toBe(true)

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

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

  • text() — возвращает текст внутри элемента.
  • html() — возвращает HTML-код элемента.
const header = wrapper.find('h1')
expect(header.text()).toBe('Заголовок страницы')

Это полезно для проверки, что элементы не только присутствуют в DOM, но и содержат корректное содержимое.

Асинхронное поведение

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

import { nextTick } from 'vue'

wrapper.vm.showDetails = true
await nextTick()

const details = wrapper.find('.details')
expect(details.exists()).toBe(true)

Без await nextTick() проверка может выполняться до того, как DOM успеет обновиться, и тест будет ложным.

Проверка условного рендеринга

Vue позволяет рендерить элементы условно через v-if или v-show. Для проверки таких элементов используют exists() или isVisible():

const modal = wrapper.find('.modal')
expect(modal.exists()).toBe(false)

wrapper.setData({ showModal: true })
await nextTick()

expect(modal.exists()).toBe(true)
expect(modal.isVisible()).toBe(true)
  • exists() проверяет наличие элемента в DOM.
  • isVisible() проверяет, видим ли элемент пользователю (учитывает display: none и другие CSS-свойства).

Проверка классов и атрибутов

Наличие элементов часто сопровождается проверкой классов или атрибутов:

const button = wrapper.find('button')
expect(button.classes()).toContain('primary')
expect(button.attributes('disabled')).toBe('disabled')
  • classes() возвращает массив классов элемента.
  • attributes(name) возвращает значение атрибута.

Это позволяет убедиться, что элемент не только существует, но и имеет правильное состояние.

Итоговые рекомендации

  • Для проверки существования элементов использовать exists().
  • Для проверки множества элементов использовать findAll и проверку длины массива.
  • Для асинхронных изменений обязательно использовать nextTick() или await wrapper.vm.$nextTick().
  • Для проверки видимости использовать isVisible(), а для проверки состояния — classes() и attributes().
  • При поиске компонентов предпочтительно использовать findComponent, а для элементов с ref — объект с { ref: 'имя' }.

Эти методы создают основу для надёжного тестирования Vue-компонентов, позволяя убедиться, что DOM отражает ожидаемое состояние приложения.

Оглавление