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

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

Типы рендеринга

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

  1. shallow — поверхностный рендеринг:

    • Создает экземпляр компонента без рендеринга дочерних компонентов.
    • Позволяет тестировать компонент в изоляции.
    • Возвращает ShallowWrapper, содержащий только компонент верхнего уровня.
    • Пример:
    import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

const wrapper = shallow(<MyComponent />);

  2. mount — полный рендеринг:

    • Полноценно рендерит компонент вместе со всеми его дочерними элементами.
    • Возвращает ReactWrapper, который позволяет обращаться к жизненному циклу компонента.
    • Используется для тестирования взаимодействия компонентов и состояния.
    • Пример:
    import { mount } from 'enzyme';

const wrapper = mount(<MyComponent />);

  3. render — статический рендеринг:

    • Использует Cheerio для генерации статического HTML.
    • Не позволяет напрямую работать с методами и состоянием компонента.
    • Используется для проверки разметки, а не логики.
    • Пример:
    import { render } from 'enzyme';

const wrapper = render(<MyComponent />);

Получение экземпляра компонента

Для глубокого взаимодействия с компонентом (например, вызова методов или проверки состояния) важно получить экземпляр React-компонента. Это возможно только при использовании mount.

  • Метод instance():
const wrapper = mount(<MyComponent />);
const instance = wrapper.instance();
instance.someMethod(); // вызов метода компонента

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

  • Работает только с классовыми компонентами.
  • Не применим к функциональным компонентам с хуками.
  • Позволяет читать и изменять внутренние свойства объекта компонента.

Доступ к props и state

Enzyme предоставляет удобные методы для проверки пропсов и состояния компонента.

  • props() — возвращает объект пропсов текущего узла:
const wrapper = shallow(<MyComponent title="Test" />);
expect(wrapper.props().title).toBe('Test');
  • state() — возвращает текущее состояние компонента (только для классовых):
const wrapper = mount(<MyComponent />);
wrapper.setState({ count: 5 });
expect(wrapper.state('count')).toBe(5);
  • setProps() — позволяет обновлять пропсы компонента и проверять реакцию на изменения:
wrapper.setProps({ title: 'New Title' });
expect(wrapper.props().title).toBe('New Title');

Поиск компонентов внутри оберток

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

  • find(selector) — поиск по имени компонента, тегу или CSS-классу:
wrapper.find('button'); // все кнопки
wrapper.find(MyChildComponent); // все дочерние компоненты MyChildComponent
wrapper.find('.active'); // элементы с классом active
  • children() — возвращает дочерние узлы текущего элемента.
  • parent() — возвращает родительский узел текущего элемента.
  • closest(selector) — возвращает ближайший узел, соответствующий селектору.
  • at(index) — выбор конкретного узла при множественном совпадении.

Эти методы позволяют детально проверять структуру компонента и его потомков.

Работа с функциональными компонентами

Функциональные компоненты не имеют экземпляра класса, поэтому методы instance() и state() неприменимы. Основные подходы для работы:

  1. Проверка пропсов и разметки через shallow или mount.
  2. Использование хуков проверяется через эффекты на разметке или моках функций.
  3. Симуляция событий позволяет изменять внутреннее состояние через обработчики:
const wrapper = shallow(<MyComponent />);
wrapper.find('button').simulate('click');
expect(wrapper.find('.count').text()).toBe('1');

Симуляция жизненного цикла

Методы mount и shallow позволяют управлять жизненным циклом компонентов:

  • shallow:

    • wrapper.instance().componentDidMount() — можно вызвать вручную.
    • wrapper.update() — обновление после изменения пропсов или состояния.

  • mount:

    • Автоматически вызывает методы жизненного цикла.
    • Можно проверять реакцию на componentDidUpdate, componentWillUnmount.

Советы по эффективному получению компонента

  • Для изолированного тестирования логики использовать shallow.
  • Для тестирования взаимодействия с DOM или жизненного цикла использовать mount.
  • Всегда проверять тип компонента (классовый или функциональный) перед использованием instance() и state().
  • При работе с функциональными компонентами фокусироваться на разметке, пропсах и событиях, а не на внутреннем состоянии.

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

Оглавление