Найти элементы селекторами: find и findAll

Vue Test Utils предоставляет удобные методы для поиска элементов в компоненте с использованием селекторов. Основными инструментами для этого являются методы find и findAll. Они позволяют работать с DOM внутри тестируемого компонента и обеспечивают контроль над поведением компонентов на уровне представления.

Метод find

Метод find используется для поиска первого совпадения по заданному селектору. Селектор может быть:

  • CSS-классом: .my-class
  • ID: #my-id
  • Тегом: button, input
  • Компонентом Vue: MyComponent

Синтаксис:

const wrapper = mount(MyComponent);
const element = wrapper.find('.my-class');

Метод возвращает объект Wrapper, даже если элемент не найден. В этом случае метод возвращает пустой wrapper, для которого можно проверить свойство exists():

expect(element.exists()).toBe(true);

Особенности find:

  • Возвращает только первый элемент, соответствующий селектору.
  • Работает как с HTML-элементами, так и с дочерними Vue-компонентами.
  • Позволяет вызывать методы text(), html(), attributes() и другие на найденном элементе:
expect(element.text()).toBe('Отправить');
expect(element.attributes('type')).toBe('button');

Метод findAll

Метод findAll используется для поиска всех совпадений по заданному селектору. Он возвращает объект WrapperArray, содержащий все найденные элементы.

Синтаксис:

const wrapper = mount(MyComponent);
const elements = wrapper.findAll('.item');

Особенности findAll:

  • Если совпадений нет, возвращается пустой массив (WrapperArray длиной 0).
  • Можно использовать индексирование для доступа к отдельным элементам:
expect(elements).toHaveLength(3);
expect(elements[0].text()).toBe('Первый элемент');
  • Позволяет выполнять перебор всех элементов через forEach:
elements.forEach(item => {
  expect(item.classes()).toContain('item');
});
  • Объекты в WrapperArray поддерживают все методы, доступные для одиночного Wrapper.

Выбор селектора

При тестировании Vue-компонентов важно выбирать селекторы с учетом устойчивости к изменениям разметки:

  • Предпочтительно использовать data-атрибуты, например data-test="submit-button":
const button = wrapper.find('[data-test="submit-button"]');
expect(button.exists()).toBe(true);
  • Избегать селекторов по позициям (:nth-child) или нестабильным классам, так как они могут ломаться при изменении стилей.

Примеры использования

Пример с кнопкой и событием:

const wrapper = mount(MyComponent);
const button = wrapper.find('button');

button.trigger('click');
expect(wrapper.emitted('submit')).toBeTruthy();

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

const wrapper = mount(MyComponent, {
  props: { items: ['A', 'B', 'C'] }
});

const listItems = wrapper.findAll('li');
expect(listItems).toHaveLength(3);
expect(listItems[1].text()).toBe('B');

Комбинированный поиск по компоненту и селектору:

const wrapper = mount(ParentComponent);
const child = wrapper.findComponent(ChildComponent).find('.child-element');

expect(child.exists()).toBe(true);

Отличия find и findAll

Метод Результат При отсутствии совпадений
find Wrapper (первое совпадение) Пустой Wrapper (exists() → false)
findAll WrapperArray (все совпадения) Пустой WrapperArray (длина 0)
  • find удобен для точечного поиска одного элемента.
  • findAll используется для проверки множественных элементов, циклической обработки или подсчета количества.

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

Для проверки найденных элементов применяются методы:

  • exists() — существует ли элемент
  • text() — текстовое содержимое
  • attributes() — атрибуты элемента
  • classes() — список классов
const element = wrapper.find('.alert');
expect(element.exists()).toBe(true);
expect(element.text()).toContain('Ошибка');
expect(element.classes()).toContain('alert-danger');

Советы по стабильному тестированию

  1. Использовать data-test атрибуты для поиска элементов.
  2. Проверять не только существование, но и свойства элементов (текст, атрибуты, события).
  3. Для повторяющихся элементов применять findAll и перебор forEach.
  4. Избегать зависимостей от структуры DOM, если цель — тест логики компонента, а не стилей.

Методы find и findAll являются фундаментальными инструментами для работы с DOM в Vue Test Utils, позволяя точно находить элементы, проверять их свойства и взаимодействовать с ними в тестах.

Оглавление