Получение props компонента

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

Основы получения props

Enzyme предоставляет удобные методы для работы с компонентами и их внутренними данными. Для получения props компонента используется метод .props(). Этот метод возвращает объект, содержащий все props, которые были переданы в компонент.

Пример использования метода для получения props:

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

describe('<MyComponent />', () => {
  it('должен получать правильные props', () => {
    const wrapper = shallow(<MyComponent name="John" age={30} />);
    const props = wrapper.props();

    expect(props.name).toBe('John');
    expect(props.age).toBe(30);
  });
});

В этом примере компонент MyComponent получает два пропса: name и age. Используя метод .props(), можно получить доступ к этим значениям и убедиться, что они правильно передаются в компонент.

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

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

it('проверяет prop name', () => {
  const wrapper = shallow(<MyComponent name="Alice" />);
  expect(wrapper.props().name).toBe('Alice');
});

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

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

Понимание того, как компонент получает и использует props, позволяет более точно контролировать его поведение в тестах. Props обычно влияют на рендеринг компонента, что может быть полезно для проверки UI-выводов. Например, компонент может рендерить разные элементы в зависимости от того, какие данные ему передаются через props.

Пример компонента, который рендерит текст в зависимости от переданного пропса:

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

В тестах можно проверять, корректно ли отображается текст на основе значения props:

it('должен отображать правильное имя в заголовке', () => {
  const wrapper = shallow(<Greeting name="Bob" />);
  expect(wrapper.text()).toBe('Hello, Bob!');
});

Здесь проверяется, что компонент Greeting правильно отображает текст, в который подставляется значение пропса name.

Шаблонные компоненты и props

Для работы с компонентами, которые получают пропсы в виде массивов или объектов, Enzyme позволяет легко извлекать такие данные с помощью метода .props(). Например, если компонент получает массив в качестве пропса, его можно проверить так:

const List = ({ items }) => (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
  </ul>
);

it('должен правильно отобразить список', () => {
  const items = ['apple', 'banana', 'cherry'];
  const wrapper = shallow(<List items={items} />);
  
  // Проверяем количество элементов в списке
  expect(wrapper.find('li')).toHaveLength(3);
});

В данном примере компонент List рендерит элементы списка на основе пропса items. Тест проверяет, что компонент правильно отображает все элементы из массива.

Изменение props после рендеринга

Enzyme позволяет изменять props у компонента после того, как он был смонтирован или прорендерен. Это может быть полезно для проверки того, как компонент реагирует на изменения props. Для этого используется метод .setProps(). Он позволяет обновить props компонента в процессе теста.

Пример:

it('должен обновить отображаемое имя после изменения prop', () => {
  const wrapper = shallow(<Greeting name="Alice" />);
  expect(wrapper.text()).toBe('Hello, Alice!');
  
  wrapper.setProps({ name: 'Bob' });
  expect(wrapper.text()).toBe('Hello, Bob!');
});

В этом примере происходит изменение пропса name через метод .setProps(), и компонент обновляет текст в соответствии с новыми данными.

Погружение в более глубокие компоненты

Enzyme предоставляет возможность тестировать не только компоненты верхнего уровня, но и вложенные компоненты, которые могут получать пропсы от своих родительских компонентов. В таких случаях также можно использовать методы для поиска дочерних компонентов и проверки их props.

Пример использования метода .find() для поиска дочернего компонента:

const Parent = () => (
  <div>
    <Child name="John" />
  </div>
);

const Child = ({ name }) => <p>{name}</p>;

it('проверяет prop в дочернем компоненте', () => {
  const wrapper = shallow(<Parent />);
  const child = wrapper.find(Child);
  expect(child.props().name).toBe('John');
});

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

Работа с компонентами, использующими пропсы для логики

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

Пример компонента с логикой, зависящей от props:

class Counter extends React.Component {
  state = { count: 0 };

  componentDidUpdate(prevProps) {
    if (prevProps.increment !== this.props.increment) {
      this.setState((prevState) => ({ count: prevState.count + this.props.increment }));
    }
  }

  render() {
    return <p>{this.state.count}</p>;
  }
}

it('должен увеличивать счетчик на основе пропса increment', () => {
  const wrapper = shallow(<Counter increment={2} />);
  expect(wrapper.text()).toBe('0');
  
  wrapper.setProps({ increment: 3 });
  expect(wrapper.text()).toBe('3');
});

В этом примере компонент Counter увеличивает счетчик в зависимости от пропса increment. Тест проверяет, что при изменении пропса обновляется и внутреннее состояние компонента.

Заключение

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

Оглавление