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

Получение состояния компонента в Enzyme

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

Метод .state() предоставляет доступ к текущему состоянию компонента. Он возвращает объект, содержащий значения всех состояний, определённых в компоненте, или конкретное состояние по имени.

Пример:

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

describe('MyComponent', () => {
  it('должен корректно инициализировать состояние', () => {
    const wrapper = shallow(<MyComponent />);
    const state = wrapper.state();
    expect(state.someKey).toBe('initialValue');
  });
});

В данном примере используется метод .state(), чтобы получить состояние компонента, а затем проверяется, что ключ someKey в этом состоянии имеет ожидаемое значение.

Получение конкретного состояния:

it('должен возвращать конкретное состояние по имени', () => {
  const wrapper = shallow(<MyComponent />);
  const someState = wrapper.state('someKey');
  expect(someState).toBe('initialValue');
});

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

Изменение состояния с помощью метода .setState()

Метод .setState() используется для имитации изменения состояния компонента. Этот метод особенно полезен в тестах, когда нужно симулировать изменение состояния и проверить, как компонент реагирует на эти изменения.

Пример:

it('должен обновить состояние при вызове setState', () => {
  const wrapper = shallow(<MyComponent />);
  wrapper.setState({ someKey: 'newValue' });
  expect(wrapper.state('someKey')).toBe('newValue');
});

Этот пример демонстрирует, как с помощью метода .setState() можно обновить состояние компонента и затем проверить, что состояние изменилось корректно.

Тестирование взаимодействия с состоянием

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

Пример:

it('должен обновить состояние при клике на кнопку', () => {
  const wrapper = shallow(<MyComponent />);
  wrapper.find('button').simulate('click');
  expect(wrapper.state('clicked')).toBe(true);
});

В данном тесте проверяется, что после клика на кнопку состояние компонента изменяется, и ключ clicked становится равным true.

Работа с асинхронными состояниями

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

Пример с асинхронной загрузкой данных:

it('должен обновить состояние после асинхронного запроса', async () => {
  const wrapper = shallow(<MyComponent />);
  await wrapper.instance().loadData();
  wrapper.update();
  expect(wrapper.state('data')).toEqual(expectedData);
});

В данном примере тестируется компонент, который после выполнения асинхронного запроса обновляет своё состояние. Метод update() необходим для синхронизации состояния компонента с последними изменениями.

Проверка состояния с учётом жизненного цикла компонента

Enzyme также позволяет взаимодействовать с состоянием компонента в разные моменты его жизненного цикла. Это даёт возможность точно контролировать, когда и как состояние компонента должно изменяться.

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

it('должен обновить состояние в методе componentDidMount', () => {
  const wrapper = shallow(<MyComponent />);
  wrapper.instance().componentDidMount();
  expect(wrapper.state('mounted')).toBe(true);
});

В данном примере после вызова метода componentDidMount() компонента, проверяется, что состояние обновилось, и ключ mounted стал равным true.

Тестирование с полной инициализацией компонента

Метод .shallow() ограничивает тестирование только одного уровня компонента, но для более глубокого тестирования состояния можно использовать метод .mount(), который рендерит компонент и его детей, обеспечивая полную инициализацию.

Пример:

it('должен корректно работать с состоянием в глубоком рендере компонента', () => {
  const wrapper = mount(<MyComponent />);
  expect(wrapper.state('someState')).toBe('someValue');
});

Используя .mount(), можно тестировать компоненты, где состояние зависит от дочерних компонентов, а также проверять, как изменение состояния влияет на рендер.

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

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

Пример:

it('должен обновить состояние при изменении пропсов', () => {
  const wrapper = shallow(<MyComponent someProp="initialValue" />);
  expect(wrapper.state('propState')).toBe('initialValue');
  wrapper.setProps({ someProp: 'newValue' });
  expect(wrapper.state('propState')).toBe('newValue');
});

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

Особенности работы с state в Enzyme

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

  • Шимуляция методов жизненного цикла. Некоторые методы жизненного цикла, такие как componentDidUpdate или componentWillReceiveProps, могут изменять состояние компонента, и важно проверять их поведение в тестах.
  • Асинхронность. Если состояние компонента изменяется асинхронно, необходимо использовать async/await и методы обновления компонента (wrapper.update()), чтобы синхронизировать тест с реальным состоянием.
  • Методы Enzyme. Помимо .state(), в Enzyme есть и другие методы для взаимодействия с компонентами, такие как .setProps(), .simulate(), .instance(), которые позволяют эмулировать события и проверять поведение компонентов в различных ситуациях.

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

Оглавление