Работа с корневым элементом (rootElement)

В Vue Test Utils корневой элемент компонента играет ключевую роль в тестировании, так как именно через него происходит взаимодействие с DOM, проверка рендеринга и выполнение событий. Понимание работы с rootElement позволяет создавать более точные и надежные тесты для компонентов Vue.

Определение и назначение rootElement

Корневой элемент — это основной DOM-узел, который возвращает компонент после его монтирования. В Vue Test Utils он доступен через свойство wrapper.element, где wrapper — объект, создаваемый функцией mount или shallowMount.

Пример:

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

const wrapper = mount(MyComponent)
console.log(wrapper.element) // <div>...</div>

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

Доступ к корневому элементу

В Vue Test Utils есть несколько способов работы с корневым элементом:

  1. Через wrapper.element — прямой доступ к DOM-узлу.
  2. Через wrapper.html() — возвращает HTML-код корневого элемента в виде строки.
  3. Через wrapper.text() — возвращает текстовое содержимое корневого элемента и его детей.

Пример проверки структуры:

expect(wrapper.element.tagName).toBe('DIV')
expect(wrapper.html()).toContain('<p>')
expect(wrapper.text()).toContain('Привет, мир!')

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

Корневой элемент используется для имитации пользовательских действий и проверки реакций компонента. Основные методы:

  • wrapper.trigger(event) — генерация событий на корневом элементе.
  • wrapper.setProps(props) — изменение свойств компонента, влияющее на DOM.
  • wrapper.setData(data) — обновление данных компонента и реактивное изменение DOM.

Пример события:

wrapper.trigger('click')
expect(wrapper.emitted()).toHaveProperty('click')

Специфические особенности rootElement

  1. Одноэлементность Каждый компонент имеет один корневой элемент. Даже если шаблон компонента содержит несколько элементов, Vue оборачивает их в один корневой элемент при использовании mount или shallowMount.

  2. Синхронное и асинхронное обновление После изменения props или data корневой элемент обновляется асинхронно. Для корректной проверки изменений рекомендуется использовать await nextTick():

import { nextTick } from 'vue'

wrapper.setData({ count: 1 })
await nextTick()
expect(wrapper.text()).toContain('1')
  1. Доступ к атрибутам и классам Корневой элемент позволяет проверять CSS-классы, идентификаторы и другие атрибуты через стандартные свойства DOM:
expect(wrapper.element.id).toBe('main')
expect(wrapper.classes()).toContain('active')
expect(wrapper.attributes('role')).toBe('button')

Замена корневого элемента

Иногда требуется тестировать компонент в определённом контейнере или под конкретным тегом. Для этого Vue Test Utils предоставляет возможность передать параметр attachTo при монтировании:

const div = document.createElement('div')
document.body.appendChild(div)

const wrapper = mount(MyComponent, { attachTo: div })
expect(wrapper.element.parentNode).toBe(div)

attachTo полезен при тестировании взаимодействия с внешними стилями, скриптами или событиями на уровне DOM, которые требуют реального родителя.

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

Корневой элемент является отправной точкой для поиска дочерних узлов с помощью методов find и findAll:

const button = wrapper.find('button')
expect(button.exists()).toBe(true)
expect(wrapper.findAll('li').length).toBe(3)

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

Рекомендации по использованию

  • Всегда использовать wrapper.element для прямого доступа к DOM.
  • При проверке HTML лучше применять wrapper.html().
  • Для взаимодействия с компонентом предпочтительно использовать trigger, setProps и setData.
  • Если компонент оборачивает контент в <div> или <span>, учитывать это при проверке тегов и классов.
  • Для асинхронных изменений DOM применять await nextTick().
  • При необходимости интеграционного тестирования использовать attachTo, чтобы смонтировать компонент в реальный контейнер.

Работа с корневым элементом является фундаментальной при тестировании Vue-компонентов. Грамотное использование wrapper.element и связанных методов обеспечивает точный контроль над структурой, состоянием и поведением компонентов в тестах.

Оглавление