Inspection HTML с помощью wrapper.html()

В тестировании Vue-компонентов ключевым аспектом является возможность проверять сгенерированный HTML после рендеринга. Vue Test Utils предоставляет для этого метод wrapper.html(), который возвращает строку с полной разметкой компонента, включая все вложенные элементы. Этот инструмент позволяет анализировать структуру DOM, проверять наличие классов, атрибутов, текстового контента и корректность шаблона после применения реактивных данных и props.

Основы использования wrapper.html()

Метод html() вызывается на объекте wrapper, который создаётся с помощью mount или shallowMount. Пример базового использования:

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

const wrapper = mount(MyComponent)
console.log(wrapper.html())

Результат — строка HTML, включающая:

  • Корневой элемент компонента
  • Вложенные дочерние элементы
  • Атрибуты, включая динамически привязанные (:class, :id)
  • Текстовый контент с учётом реактивных данных

Использование wrapper.html() особенно полезно для снапшот-тестирования, где сравнивается актуальная разметка с эталонной.

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

Метод html() позволяет проверять конкретные элементы и текст через строки:

expect(wrapper.html()).toContain('<button class="submit-btn">')
expect(wrapper.html()).toContain('Отправить')

Важно понимать, что html() возвращает строку всей разметки, а не отдельный элемент. Для проверки конкретных элементов удобнее сочетать html() с методами find или findAll:

const button = wrapper.find('button.submit-btn')
expect(button.html()).toBe('<button class="submit-btn">Отправить</button>')

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

Взаимодействие с реактивными данными

Vue Test Utils учитывает реактивность компонентов. Изменение data, props или состояния компонента отражается в выводе wrapper.html() после вызова await nextTick():

import { nextTick } from 'vue'

wrapper.setData({ count: 5 })
await nextTick()
expect(wrapper.html()).toContain('5')

Без nextTick() изменения могут не отобразиться, так как Vue обновляет DOM асинхронно.

Тестирование условного рендеринга

v-if, v-show и условные блоки можно проверять напрямую через HTML:

wrapper.setData({ isVisible: true })
await nextTick()
expect(wrapper.html()).toContain('<div class="popup">')

wrapper.setData({ isVisible: false })
await nextTick()
expect(wrapper.html()).not.toContain('<div class="popup">')

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

Проверка динамических классов и атрибутов

Динамически привязанные классы и атрибуты также видны через html():

wrapper.setProps({ active: true })
await nextTick()
expect(wrapper.html()).toContain('class="tab active"')

В комбинации с find можно делать более точечные проверки:

const tab = wrapper.find('.tab')
expect(tab.html()).toContain('active')

Ограничения и рекомендации

  1. Метод возвращает строку всего DOM, поэтому большие компоненты могут генерировать объёмный HTML.
  2. Для тестов с частыми проверками отдельных элементов лучше использовать find и text(), чтобы избегать сложных строковых сравнений.
  3. HTML, возвращаемый методом, отражает реальный рендер после всех реактивных обновлений, что делает его надежным инструментом для интеграционных проверок компонентов.

wrapper.html() служит универсальным инструментом для инспекции DOM в тестах, сочетая простоту строковых проверок и возможность анализа всей структуры компонента. В сочетании с реактивными изменениями, условным рендерингом и динамическими классами метод становится ключевым для детальной валидации Vue-компонентов.

Оглавление