Получение HTML контента (html)

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

Метод html()

Метод html() вызывается на экземпляре обертки компонента (Wrapper или DOMWrapper) и возвращает полный HTML, включая дочерние элементы. Это обеспечивает возможность точной проверки визуальной структуры без необходимости обращения к отдельным DOM-узлам через селекторы.

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

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

Результатом выполнения будет строка HTML, например:

<div class="my-component">
  <h1>Заголовок</h1>
  <p>Контент компонента</p>
</div>

Проверка HTML с помощью Jest

Для автоматизированного тестирования можно использовать Jest-матчер toContain или toBe:

test('рендерит правильный HTML', () => {
  const wrapper = mount(MyComponent)
  expect(wrapper.html()).toContain('<h1>Заголовок</h1>')
})
  • toContain проверяет наличие фрагмента HTML.
  • toBe позволяет сравнивать полный HTML, включая все пробелы и атрибуты:
expect(wrapper.html()).toBe('<div class="my-component"><h1>Заголовок</h1><p>Контент компонента</p></div>')

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

Динамический контент

Метод html() особенно полезен для проверки динамического контента, например, при использовании пропсов или состояний:

const wrapper = mount(MyComponent, {
  props: { title: 'Новый заголовок' }
})
expect(wrapper.html()).toContain('<h1>Новый заголовок</h1>')

При изменении состояния компонента через методы или реактивные данные, HTML обновляется автоматически:

wrapper.setData({ content: 'Обновлённый текст' })
expect(wrapper.html()).toContain('<p>Обновлённый текст</p>')

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

Различия между html() и text()

  • html() возвращает весь HTML узла и его детей.
  • text() возвращает только текстовое содержимое, игнорируя теги.

Пример:

const wrapper = mount(MyComponent)
console.log(wrapper.html()) // <div><p>Текст</p></div>
console.log(wrapper.text()) // Текст

Использование html() необходимо, когда проверяется структура тегов, наличие классов, атрибутов или вложенных элементов.

Советы при тестировании HTML

  1. Минимизировать проверку всего HTML — часто достаточно проверять ключевые элементы через toContain или селекторы.
  2. Стабильность тестов — избегать проверки форматирования, пробелов и переносов строки, которые могут различаться между средами.
  3. Комбинировать с селекторами — можно сначала найти элемент через wrapper.find() и затем вызвать html() на нём, чтобы проверить конкретный участок DOM:
const h1 = wrapper.find('h1')
expect(h1.html()).toBe('<h1>Новый заголовок</h1>')
  1. Проверка атрибутов — если важен не только текст, а и атрибуты, html() позволяет убедиться в их наличии:
expect(wrapper.html()).toContain('class="my-component"')

Особенности при работе с слотами

Слоты, переданные в компонент, также учитываются в методе html(). Это позволяет тестировать рендеринг контента в слотах:

const wrapper = mount(MyComponent, {
  slots: {
    default: '<span>Слотовый контент</span>'
  }
})
expect(wrapper.html()).toContain('<span>Слотовый контент</span>')

Такой подход облегчает проверку компонентов с гибкой структурой и динамическими слотами.

Вывод

Метод html() является основным инструментом для проверки структуры рендера компонентов Vue. Он позволяет получать полное строковое представление DOM, проверять статический и динамический контент, а также контролировать результат работы слотов и реактивных данных. При правильном использовании html() обеспечивает детальное и надёжное тестирование интерфейсов.

Оглавление