Поиск по тегу

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

Суть поиска по тегу

Поиск по тегу — это способ нахождения элементов в сгенерированном дереве, основываясь на их типе или имени тега (например, div, span, button, и так далее). Это полезно в тех случаях, когда необходимо проверить структуру компонента и взаимодействие с его элементами, не привязываясь к конкретным аттрибутам или классу.

Основной метод: find()

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

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

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('должен содержать кнопку', () => {
    const wrapper = shallow(<MyComponent />);
    const button = wrapper.find('button');
    expect(button).toHaveLength(1);
  });
});

В данном примере происходит поиск всех элементов с тегом <button> в рендере компонента MyComponent. Если такой элемент найден, метод find() вернёт объект, который можно использовать для дальнейших проверок.

Важные особенности использования метода find()

  • Поиск всех элементов с данным тегом: Когда передается только имя тега, метод возвращает все элементы этого типа, которые присутствуют в дереве компонента. Это полезно, если нужно проверить, сколько таких элементов существует.

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

  • Метод поддерживает цепочку вызовов: После вызова find() можно применять другие методы Enzyme для более детального анализа найденных элементов, такие как text(), prop(), simulate(), и т. д.

Пример с дополнительными методами:

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('должен содержать кнопку с текстом "Submit"', () => {
    const wrapper = shallow(<MyComponent />);
    const button = wrapper.find('button');
    expect(button).toHaveLength(1);
    expect(button.text()).toBe('Submit');
  });
});

Поиск по тегу с учетом вложенности

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

Пример:

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('должен содержать кнопку внутри контейнера с классом "form-container"', () => {
    const wrapper = shallow(<MyComponent />);
    const formContainer = wrapper.find('.form-container');
    const button = formContainer.find('button');
    expect(button).toHaveLength(1);
  });
});

Здесь сначала находим элемент с классом form-container, а затем уже внутри него ищем все элементы с тегом button.

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

Метод find() поддерживает не только простые теги, но и более сложные селекторы, такие как классы, id, атрибуты и т. д. Это дает возможность комбинировать поиск по тегу с другими критериями.

Пример комбинированного поиска:

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('должен содержать кнопку с классом "submit-button"', () => {
    const wrapper = shallow(<MyComponent />);
    const button = wrapper.find('button.submit-button');
    expect(button).toHaveLength(1);
  });
});

Здесь осуществляется поиск кнопки с тегом button и классом submit-button.

Ограничения поиска по тегу

Хотя поиск по тегу является мощным инструментом, он может быть ограничен в следующих случаях:

  • Нет различий между элементами: Если несколько элементов в дереве компонента имеют одинаковый тег, поиск по тегу может вернуть все эти элементы. Это может привести к трудностям в тестировании, если нужно точно проверить конкретный элемент. В таких случаях полезно использовать более специфичные селекторы (например, классы или атрибуты).

  • Не работает с компонентами: Если внутри компонента используется собственный компонент React (например, MyComponent), то поиск по тегу не сработает. Вместо этого нужно искать компонент через его тип или использовать более точные методы поиска.

Поиск по компоненту

В случае, когда нужно найти не обычные DOM-элементы, а компоненты React, можно использовать другой способ поиска, который будет отличаться от поиска по тегу. Например, для поиска компонента в Enzyme можно использовать find() с указанием имени компонента.

Пример:

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
import ChildComponent from './ChildComponent';

describe('MyComponent', () => {
  it('должен содержать компонент ChildComponent', () => {
    const wrapper = shallow(<MyComponent />);
    const childComponent = wrapper.find(ChildComponent);
    expect(childComponent).toHaveLength(1);
  });
});

Здесь ChildComponent — это не HTML-тег, а React-компонент. Этот метод полезен, когда нужно искать вложенные компоненты в дереве.

Заключение

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

Оглавление