Проверка передачи props

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

Основы работы с props в React

Props (сокращение от properties) — это способ передачи данных от родительского компонента к дочернему. В React компоненты принимают props как входные параметры и используют их для отображения данных или выполнения логики. Props являются неизменяемыми, и передаются только сверху вниз, от родителя к потомку.

Для тестирования передачи props важно убедиться, что:

  • Компонент получает правильные props.
  • Компонент корректно обновляется, если props изменяются.
  • Логика, зависящая от props, работает верно.

Основные подходы для проверки props в Enzyme

В Enzyme для проверки props используются методы prop() и setProps(). Эти методы позволяют извлечь переданные значения или обновить props в уже отрендеренном компоненте.

Метод prop()

Метод prop() используется для получения значения конкретного prop в компоненте. Он принимает один аргумент — имя пропса, и возвращает его значение.

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

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

describe('MyComponent', () => {
  it('получает правильный пропс', () => {
    const wrapper = shallow(<MyComponent name="John" />);
    expect(wrapper.prop('name')).toEqual('John');
  });
});

В этом примере wrapper.prop('name') извлекает значение пропса name и проверяет, что оно соответствует 'John'.

Метод setProps()

Метод setProps() позволяет обновить пропсы компонента после его первоначального рендера. Это полезно для тестирования изменений в компоненте, если props изменяются в ходе работы приложения.

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

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

describe('MyComponent', () => {
  it('корректно обновляет props', () => {
    const wrapper = shallow(<MyComponent name="John" />);
    wrapper.setProps({ name: 'Alice' });
    expect(wrapper.prop('name')).toEqual('Alice');
  });
});

В данном примере компонент сначала рендерится с пропсом name="John", а затем с помощью setProps() его значение изменяется на 'Alice'. После этого проверяется, что пропс обновился корректно.

Проверка изменения поведения компонента с разными props

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

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

Пример:

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

describe('MyComponent', () => {
  it('отображает правильный текст в зависимости от props', () => {
    const wrapper = shallow(<MyComponent name="John" />);
    expect(wrapper.text()).toContain('Hello, John');
    
    wrapper.setProps({ name: 'Alice' });
    expect(wrapper.text()).toContain('Hello, Alice');
  });
});

В этом примере компонент выводит текст, который зависит от значения пропса name. Сначала проверяется, что компонент отрисовывает текст с именем 'John', а затем, после изменения пропса, текст обновляется на имя 'Alice'.

Тестирование вложенных компонентов с props

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

Пример:

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

describe('ParentComponent', () => {
  it('передает props дочернему компоненту', () => {
    const wrapper = shallow(<ParentComponent />);
    const child = wrapper.find(ChildComponent);
    expect(child.prop('name')).toEqual('John');
  });
});

Здесь компонент ParentComponent передает пропс name в дочерний компонент ChildComponent. С помощью метода find() мы находим дочерний компонент и проверяем, что пропс передан правильно.

Мокирование props в тестах

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

Пример:

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

describe('MyComponent', () => {
  it('мокирует props', () => {
    const mockProps = { name: 'John', age: 30 };
    const wrapper = shallow(<MyComponent {...mockProps} />);
    expect(wrapper.prop('name')).toEqual('John');
    expect(wrapper.prop('age')).toEqual(30);
  });
});

В данном примере с помощью мокированных пропсов создается тестовая среда для компонента, где мы проверяем, что компонент правильно обрабатывает переданные данные.

Проверка передачи функции как пропса

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

Пример:

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

describe('MyComponent', () => {
  it('вызывает функцию при клике', () => {
    const mockFunction = jest.fn();
    const wrapper = shallow(<MyComponent onCl ick={mockFunction} />);
    
    wrapper.find('button').simulate('click');
    expect(mockFunction).toHaveBeenCalled();
  });
});

В этом примере компонент MyComponent принимает функцию onClick, которая должна быть вызвана при клике на кнопку. С помощью jest.fn() создается мок-функция, которая проверяется на вызов при симуляции клика.

Заключение

Тестирование передачи props в Enzyme является важной частью тестирования компонентов React. Проверка правильности получения и обновления пропсов, а также их влияние на поведение компонента позволяет убедиться в корректности работы приложения. Использование методов prop(), setProps() и find() в Enzyme предоставляет удобные инструменты для проверки и манипуляции с пропсами в тестах.

Оглавление