Базовые селекторы

Enzyme предоставляет мощные инструменты для тестирования компонентов React, обеспечивая удобные средства для работы с DOM. Основной задачей при тестировании компонентов является поиск элементов, с которыми будет взаимодействовать тест. В Enzyme для этого существует несколько типов селекторов, каждый из которых может быть использован в зависимости от конкретных нужд.

Метод find()

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

  • CSS-селекторы — это базовые способы поиска, такие как классы, ID, теги.
  • React-компоненты — можно искать элементы по имени компонента, который был передан в JSX.
  • Атрибуты — поиск элементов по атрибутам, например, data-test-id.

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

const wrapper = shallow(<MyComponent />);
const button = wrapper.find('button');

Здесь find('button') ищет все элементы <button> в компоненте MyComponent.

Важно помнить, что метод find() всегда возвращает объект обёртки, даже если элемент не был найден. В случае отсутствия элементов метод вернёт пустой объект.

Поиск по классам

Для поиска элементов по классу используется обычный CSS-селектор. В случае с Enzyme можно искать элементы, использующие определённый класс.

Пример:

const wrapper = shallow(<MyComponent />);
const element = wrapper.find('.my-class');

Такой код будет искать все элементы с классом my-class.

Поиск по ID

Селектор по ID также поддерживается через стандартный синтаксис CSS-селекторов.

Пример:

const wrapper = shallow(<MyComponent />);
const element = wrapper.find('#my-id');

Здесь метод find() ищет элемент с атрибутом id="my-id".

Поиск по атрибутам

Enzyme позволяет искать элементы по любым атрибутам, включая кастомные. Для этого используется синтаксис атрибутов в стиле CSS.

Пример:

const wrapper = shallow(<MyComponent />);
const element = wrapper.find('[data-test-id="unique"]');

В данном примере ищется элемент с атрибутом data-test-id="unique". Это полезно для поиска элементов с уникальными идентификаторами, которые можно задать для тестирования.

Поиск по тэгу

Метод find() также позволяет искать элементы по тегам, например, для поиска всех ссылок или параграфов.

Пример:

const wrapper = shallow(<MyComponent />);
const links = wrapper.find('a');

Здесь метод найдёт все элементы <a> внутри компонента.

Поиск по React-компонентам

Enzyme позволяет искать элементы не только по стандартным селекторам, но и по названию React-компонента, что бывает полезно при тестировании вложенных компонентов.

Пример:

const wrapper = shallow(<MyComponent />);
const childComponent = wrapper.find(ChildComponent);

Этот код найдёт все экземпляры компонента ChildComponent внутри MyComponent. Такое поведение часто используется для проверки наличия или свойств дочерних компонентов.

Использование at()

Метод at() используется для получения конкретного элемента по индексу в результатах поиска. Это полезно, если на странице несколько элементов одного типа, и нужно взаимодействовать с конкретным из них.

Пример:

const wrapper = shallow(<MyComponent />);
const firstButton = wrapper.find('button').at(0);

Здесь at(0) возвращает первый элемент из найденных кнопок.

Методы children(), parent(), closest()

Enzyme предоставляет несколько дополнительных методов для навигации по иерархии элементов:

  • children() — используется для получения всех дочерних элементов найденного компонента.
const wrapper = shallow(<MyComponent />);
const children = wrapper.find('.parent').children();
  • parent() — позволяет получить родительский элемент.
const wrapper = shallow(<MyComponent />);
const parent = wrapper.find('.child').parent();
  • closest() — используется для поиска ближайшего родительского элемента, который соответствует указанному селектору.
const wrapper = shallow(<MyComponent />);
const closestParent = wrapper.find('.child').closest('.parent');

Псевдоселекторы и комбинированные селекторы

Enzyme поддерживает работу с псевдоселекторами CSS, такими как :first-child, :last-child, :nth-child, и другими.

Пример:

const wrapper = shallow(<MyComponent />);
const firstItem = wrapper.find('li:first-child');

Здесь будет найден первый элемент списка <li>.

Также можно комбинировать несколько селекторов для точного поиска элементов.

Пример:

const wrapper = shallow(<MyComponent />);
const buttonWithClass = wrapper.find('button.my-button');

Этот код ищет элементы <button> с классом my-button.

Метод filter()

Метод filter() позволяет фильтровать найденные элементы с использованием дополнительного условия. Он может быть полезен, когда нужно уточнить поиск.

Пример:

const wrapper = shallow(<MyComponent />);
const button = wrapper.find('button').filter('.primary');

Здесь сначала находят все элементы <button>, а затем фильтруют те из них, которые имеют класс primary.

Заключение

Базовые селекторы Enzyme обеспечивают гибкие возможности для поиска элементов в компоненте. Использование метода find() в сочетании с различными селекторами позволяет эффективно тестировать интерфейсы, проверяя наличие нужных элементов и их правильное поведение.

Оглавление