Поиск элементов по тексту

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

Методы поиска

Для работы с текстом в Vue Test Utils используются методы find, findAll, а также специальные проверки через text().

  1. Метод find

Метод find позволяет выбрать первый элемент, соответствующий заданному селектору. При этом текст элемента можно получить через метод text():

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

const wrapper = mount(MyComponent)

// Получение первого абзаца по селектору
const paragraph = wrapper.find('p')

// Проверка текста
expect(paragraph.text()).toBe('Привет, мир!')
  1. Метод findAll

Метод findAll возвращает коллекцию всех элементов, соответствующих селектору, что удобно для поиска элементов с одинаковой структурой, но разным содержимым:

const items = wrapper.findAll('li')

items.forEach(item => {
  console.log(item.text())
})

Использование текстового поиска без явного селектора

Vue Test Utils не поддерживает прямой поиск по тексту без селектора. Для таких случаев применяется комбинация findAll и фильтрации через метод filter:

const items = wrapper.findAll('li')
const itemWithText = items.filter(item => item.text() === 'Нужный текст')[0]

expect(itemWithText.exists()).toBe(true)

Ключевой момент: text() возвращает объединённый текст всех потомков элемента, поэтому поиск по частичному совпадению удобно делать с includes:

const itemWithSubstring = items.find(item => item.text().includes('Частичный текст'))
expect(itemWithSubstring.exists()).toBe(true)

Поиск по тексту внутри компонентов с динамическими данными

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

import { nextTick } from 'vue'

const wrapper = mount(MyComponent, {
  props: { message: 'Первое сообщение' }
})

// Обновляем prop
await wrapper.setProps({ message: 'Обновлённое сообщение' })
await nextTick()

expect(wrapper.text()).toContain('Обновлённое сообщение')

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

Совмещение поиска по тексту и селектору

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

const button = wrapper.findAll('button')
  .find(btn => btn.text() === 'Отправить')

expect(button.exists()).toBe(true)

Такой подход особенно полезен для форм с несколькими кнопками одинакового класса.

Советы по надежному поиску

  • Использовать семантические селекторы, когда это возможно (button, h1, p) вместо классов, чтобы тесты были менее зависимы от стилей.
  • Проверять текст полностью или частично в зависимости от стабильности содержимого. Полное совпадение более строгое, частичное — более гибкое.
  • Комбинировать с атрибутами (data-testid) для сложных компонентов, где текст может изменяться динамически.

Тестирование сложных текстовых структур

В случаях, когда текст разбит на несколько элементов, удобно использовать text() на родительском контейнере:

const container = wrapper.find('.message-container')
expect(container.text()).toContain('Часть текста')
expect(container.text()).toContain('Другая часть')

Метод text() объединяет весь видимый текст, игнорируя вложенные элементы, что делает проверку удобной для сложных шаблонов.

Использование регулярных выражений

Для поиска по тексту с возможными вариациями применяется поддержка регулярных выражений:

const header = wrapper.find('h1')
expect(header.text()).toMatch(/Привет, \w+/)

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

Практическая структура поиска по тексту

  1. Выбрать родительский элемент с помощью find или findAll.
  2. Получить текст с помощью text().
  3. Применить точное или частичное совпадение, либо регулярное выражение.
  4. Для динамических данных использовать await nextTick() после изменений состояния или props.
  5. Комбинировать с селекторами и атрибутами для однозначного выбора элементов.

Поиск элементов по тексту в Vue Test Utils является основой для проверки содержимого компонента. Правильное использование text(), фильтров и асинхронных обновлений позволяет создавать надёжные и поддерживаемые тесты.

Оглавление