exists() и проверка наличия элемента

Enzyme предоставляет множество методов для тестирования компонентов React, и одним из самых популярных является метод exists(). Этот метод используется для проверки наличия определённого элемента в компоненте. Он позволяет убедиться, что элемент был корректно отрендерен, и помогает в тестах, где требуется проверить структуру DOM или корректность визуальных элементов.

Синтаксис

wrapper.exists(selector)

Параметры:

  • selector: строка (CSS-селектор), функция или объект. Это параметр, с помощью которого можно выбрать конкретный элемент для проверки.

Возвращаемое значение:

  • Метод возвращает булево значение: true, если элемент существует, и false, если не существует.

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

Для начала стоит рассмотреть базовый пример использования exists(). Допустим, есть следующий компонент:

import React from 'react';

const Greeting = ({ name }) => (
  <div>
    <h1>Привет, {name}!</h1>
  </div>
);

export default Greeting;

Теперь, используя Enzyme, можно протестировать, что компонент правильно отображает элемент <h1>.

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

describe('Greeting Component', () => {
  it('должен рендерить элемент h1', () => {
    const wrapper = shallow(<Greeting name="Иван" />);
    expect(wrapper.exists('h1')).toBe(true);
  });
});

В данном случае wrapper.exists('h1') проверяет, существует ли элемент <h1> в отрендеренном компоненте. Так как компонент возвращает этот элемент, тест пройдет успешно.

Использование с вложенными компонентами

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

const UserProfile = ({ username }) => (
  <div className="profile">
    <h1>{username}</h1>
    <button>Редактировать</button>
  </div>
);

export default UserProfile;

Для тестирования наличия элементов в таком компоненте можно использовать exists() следующим образом:

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

describe('UserProfile Component', () => {
  it('должен рендерить кнопку и заголовок', () => {
    const wrapper = shallow(<UserProfile username="Анна" />);
    expect(wrapper.exists('h1')).toBe(true); // Проверка на заголовок
    expect(wrapper.exists('button')).toBe(true); // Проверка на кнопку
  });
});

Здесь проверяется наличие как заголовка, так и кнопки в рендеренном компоненте.

Использование с условиями

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

Предположим, у нас есть компонент, который отображает сообщение о загрузке только тогда, когда идет процесс загрузки:

const LoadingIndicator = ({ loading }) => (
  <div>
    {loading && <span>Загрузка...</span>}
  </div>
);

Для проверки отображения элемента можно использовать exists():

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

describe('LoadingIndicator Component', () => {
  it('показывает сообщение "Загрузка..." если loading true', () => {
    const wrapper = shallow(<LoadingIndicator loading={true} />);
    expect(wrapper.exists('span')).toBe(true); // Проверка на наличие элемента span
  });

  it('не показывает сообщение "Загрузка..." если loading false', () => {
    const wrapper = shallow(<LoadingIndicator loading={false} />);
    expect(wrapper.exists('span')).toBe(false); // Проверка на отсутствие элемента span
  });
});

Этот пример демонстрирует, как с помощью exists() можно проверить наличие элемента в зависимости от значений пропсов, переданных в компонент.

Особенности и советы

  1. CSS-селекторы и вложенные компоненты: При использовании exists() с CSS-селекторами важно помнить, что метод проверяет существование элементов на всех уровнях вложенности. Это означает, что если в компоненте есть вложенные дочерние компоненты, exists() проверит наличие элемента в их разметке.

  2. Использование с функциями: В качестве параметра selector можно передать не только строку с CSS-селектором, но и функцию, которая будет проверять наличие элемента с более сложной логикой. Например, для проверки наличия компонента можно использовать что-то вроде:

    expect(wrapper.exists(component => component.type() === 'h1')).toBe(true);

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

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

    expect(wrapper.exists({ className: 'profile' })).toBe(true);

  4. Работа с состоянием и пропсами: Метод exists() полезен для проверки состояния компонентов, когда элементы зависят от их состояния или переданных пропсов. В таком случае можно передавать различные состояния или пропсы и проверять, что элементы изменяются в ответ на эти изменения.

Сравнение с другими методами

Метод exists() является одним из наиболее прямолинейных способов проверки наличия элемента, однако в Enzyme есть и другие методы, которые также могут быть полезны в подобных тестах:

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

    expect(wrapper.find('h1').text()).toBe('Привет, Иван!');

  • length: Вместо использования exists(), можно использовать свойство length, чтобы проверить количество найденных элементов:

    expect(wrapper.find('h1').length).toBe(1); // Проверка, что h1 существует

  • contains(): Этот метод проверяет, содержит ли компонент определённый элемент. Это может быть полезно, если необходимо проверить, что компонент отрендерил какой-то контент или дочерний элемент.

Заключение

Метод exists() является важным инструментом для проверки структуры компонентов в тестах с использованием Enzyme. Он позволяет быстро и эффективно проверять, что определённые элементы были корректно отрендерены в компоненте. Вместе с другими методами Enzyme, такими как find() и length, exists() помогает создавать более комплексные и точные тесты для React-компонентов.

Оглавление