0Pricing
Vue Academy · Урок

Монтирование и поиск компонентов

mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText() и data-testid

«Монтирование и поиск компонентов» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Отрисовка компонентов в тестах

Чтобы протестировать компонент, нужно отрисовать его в DOM jsdom, а затем проверить результат. @vue/test-utils предоставляет mount и объект wrapper с помощниками для поиска.

Монтирование: полная отрисовка

mount по-настоящему отрисовывает компонент и все его дочерние компоненты. Используйте его, когда поведение зависит от фактической отрисовки дочерних компонентов.

import { mount } from "@vue/test-utils"
import Card from "./Card.vue"

const wrapper = mount(Card, {
  props: { title: "Hello" },
})

shallowMount: заглушки для дочерних компонентов

shallowMount отрисовывает компонент, но заменяет дочерние компоненты легковесными заглушками. Это изолирует тестируемый модуль от внутренней реализации дочерних компонентов.

import { shallowMount } from "@vue/test-utils"
import Page from "./Page.vue"

const wrapper = shallowMount(Page)
// child components appear as <child-stub />

Полное монтирование и shallowMount

Выбирайте способ в зависимости от цели:

  • полное монтирование — в стиле интеграционного тестирования; важно, как отрисовываются дочерние компоненты.
  • shallowMount — в стиле модульного тестирования; Вы проверяете только логику и шаблон этого компонента.

Поверхностное монтирование выполняется быстрее и предотвращает каскадные сбои из-за ошибок в дочерних компонентах.

find: необязательное совпадение

wrapper.find(selector) принимает CSS-селектор и возвращает оболочку. Если ничего не совпало, значение exists() в результате равно false, а исключение не возникает.

const title = wrapper.find("h1")
expect(title.exists()).toBe(true)
expect(title.text()).toBe("Hello")

get: обязательное совпадение

wrapper.get(selector) похож на find, но выбрасывает исключение, если элемент отсутствует. Используйте его, когда элемент должен присутствовать: сообщение об ошибке понятнее, чем последующая попытка обратиться к null.

const button = wrapper.get("button.submit")
// throws immediately with a helpful message if absent

Выбор между find и get

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

expect(wrapper.find(".error").exists()).toBe(false)

const label = wrapper.get("label")
expect(label.text()).toBe("Email")

findAll: несколько элементов

wrapper.findAll(selector) возвращает массив оболочек для каждого совпадения. Это удобно для проверки длины списка и перебора строк.

const items = wrapper.findAll("li")
expect(items).toHaveLength(3)
expect(items[0].text()).toBe("First")

Чтение текста элемента

wrapper.text() возвращает обрезанный и объединенный текстовый контент элемента и его дочерних элементов. Это удобно для проверки видимого текста без необходимости учитывать точную разметку.

expect(wrapper.text()).toContain("3 results found")

Проверка разметки

wrapper.html() возвращает строку отрисованного HTML. Это полезно для отладки неудачного теста или проверки атрибутов и структуры.

console.log(wrapper.html())
// <div class="card"><h1>Hello</h1></div>
expect(wrapper.html()).toContain("class=\"card\"")

Поиск дочерних компонентов

Помимо CSS-селекторов, find и findComponent принимают ссылку на компонент, чтобы найти экземпляр определенного дочернего компонента.

import { findComponent } from "@vue/test-utils"
import Avatar from "./Avatar.vue"

const avatar = wrapper.findComponent(Avatar)
expect(avatar.exists()).toBe(true)

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете поиск элементов с помощью утилит тестирования.

Итоги

Вы научились отрисовывать компоненты и находить в них элементы:

  • mount по-настоящему отрисовывает дочерние компоненты, а shallowMount заменяет их заглушками для изоляции.
  • find возвращает потенциально пустую оболочку, а get выбрасывает исключение, если элемент не найден.
  • findAll возвращает массив для списков.
  • text() считывает видимый текст, а html() возвращает отрисованную разметку.
  • findComponent находит определенный дочерний компонент.

Часто задаваемые вопросы

Урок «Монтирование и поиск компонентов» бесплатный?

Да — полный текст урока «Монтирование и поиск компонентов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Монтирование и поиск компонентов»?

mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText() и data-testid Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Монтирование и поиск компонентов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Настройка Vitest для проектов Vue
  2. Монтирование и поиск компонентов
  3. Тестирование взаимодействий пользователя и событий
  4. Имитация композируемых модулей, хранилищ и API
← Назад к Vue Academy