Получение текста элемента (text)

Vue Test Utils (VTU) предоставляет набор инструментов для юнит-тестирования компонентов Vue.js. Одной из ключевых операций при тестировании является извлечение текста из элементов, чтобы проверить, что компонент отображает ожидаемое содержимое.

Метод text()

Основным способом получения текста из элемента является метод text(), который применяется к обёртке компонента (Wrapper или VueWrapper).

Пример базового использования:

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

const wrapper = mount(MyComponent)
expect(wrapper.text()).toContain('Привет, мир!')

Особенности метода text():

  1. Возвращает весь видимый текст внутри компонента, включая текст всех дочерних элементов.
  2. Игнорирует HTML-теги, возвращая только текстовое содержимое.
  3. Не включает текст, который находится внутри скрытых элементов с display: none или v-if="false".

Получение текста конкретного элемента

Для проверки текста конкретного DOM-узла используется метод find или findAll для поиска элемента, после чего вызывается text():

const wrapper = mount(MyComponent)

// Получение текста по селектору
const title = wrapper.find('h1')
expect(title.text()).toBe('Заголовок страницы')

// Если элементов несколько
const items = wrapper.findAll('li')
expect(items[0].text()).toBe('Первый элемент')
expect(items[1].text()).toBe('Второй элемент')

При использовании findAll возвращается массив обёрток (WrapperArray), каждая из которых поддерживает метод text().

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

Метод text() возвращает только текст, тогда как html() возвращает всю HTML-разметку элемента.

const wrapper = mount({
  template: `<div><span>Текст</span><strong>Важно</strong></div>`
})

wrapper.text()   // "ТекстВажно"
wrapper.html()   // "<div><span>Текст</span><strong>Важно</strong></div>"

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

Тестирование реактивного текста

В компонентах Vue часто встречается реактивный текст через data или computed. После изменения состояния необходимо вызывать await nextTick() для корректного получения обновлённого текста:

import { nextTick } from 'vue'

const wrapper = mount({
  data() {
    return { count: 0 }
  },
  template: `<p>{{ count }}</p>`
})

expect(wrapper.text()).toBe('0')

wrapper.setData({ count: 5 })
await nextTick()
expect(wrapper.text()).toBe('5')

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

Текстовые данные, передаваемые через слоты, также можно проверять с помощью text():

const wrapper = mount(MyComponent, {
  slots: {
    default: '<span>Контент слота</span>'
  }
})

expect(wrapper.text()).toContain('Контент слота')

Практические рекомендации

  • Для проверки текста всего компонента удобно использовать wrapper.text().
  • Для проверки конкретных элементов — wrapper.find(selector).text().
  • При работе с асинхронными изменениями текста следует использовать await nextTick() или методы, возвращающие промисы.
  • Избегать сравнения текста с HTML-разметкой, если интересует именно визуальный контент.

Частые ошибки

  1. Сравнение текста с пустым значением перед рендером: текст появляется только после монтирования компонента.
  2. Попытка получить текст скрытого элемента: элементы с v-if="false" не включаются в результат text().
  3. Не использование await nextTick() после изменения данных: может приводить к устаревшему значению текста.

Использование метода text() в сочетании с точным поиском элементов через find и findAll обеспечивает надёжное тестирование отображаемого контента, делая проверки компонентов Vue.js предсказуемыми и стабильными.

Оглавление