Тестирование компонентов, подключённых к Redux

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

Тестирование компонентов, которые подключены к Redux, включает несколько ключевых аспектов:

  • Подключение компонента к хранилищу Redux.
  • Мокирование store для тестов.
  • Тестирование действий и редьюсеров.
  • Проверка взаимодействия компонента с Redux.
  • Асинхронное тестирование с использованием middleware Redux, например, redux-thunk.

Подключение компонента к Redux Store

Компоненты, использующие Redux, обычно подключаются через функцию connect из библиотеки react-redux. Эта функция связывает компонент с состоянием Redux, предоставляя ему доступ к данным хранилища и возможность отправлять действия. При тестировании таких компонентов важно не только рендерить сам компонент, но и правильно настроить mock-стор для имитации работы Redux.

Пример простого компонента, подключённого к Redux:

import React from 'react';
import { connect } from 'react-redux';

const Counter = ({ count, dispatch }) => (
  <div>
    <p>{count}</p>
    <button onCl ick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
  </div>
);

const mapStateToProps = (state) => ({
  count: state.count,
});

export default connect(mapStateToProps)(Counter);

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

Мокирование Redux Store

Для тестирования компонента, использующего Redux, потребуется мокирование хранилища (store). В Enzyme для этого можно использовать библиотеку redux-mock-store, которая позволяет создать mock store, который можно передавать в компонент через Provider.

Пример настройки теста с mock store:

import React from 'react';
import { mount } from 'enzyme';
import { Provider } from 'react-redux';
import { createMockStore } from 'redux-mock-store';
import Counter from './Counter';

const mockStore = createMockStore();
const initialState = { count: 0 };
const store = mockStore(initialState);

describe('<Counter />', () => {
  it('renders correctly with initial state', () => {
    const wrapper = mount(
      <Provider store={store}>
        <Counter />
      </Provider>
    );
    
    expect(wrapper.find('p').text()).toBe('0');
  });
});

Здесь создаётся mock store с начальным состоянием { count: 0 }, и компонент оборачивается в Provider, чтобы передать store. После этого можно проверять отображение данных из состояния Redux, а также симулировать действия, которые изменяют состояние.

Тестирование взаимодействия с Redux: диспатчинг действий

Чтобы протестировать взаимодействие компонента с Redux, нужно убедиться, что при определённых действиях компонента отправляются правильные действия (dispatch). Это можно проверить с помощью мокированного store и вызова нужных методов.

Пример теста для кнопки, которая увеличивает счётчик:

it('dispatches INCREMENT action on button click', () => {
  const wrapper = mount(
    <Provider store={store}>
      <Counter />
    </Provider>
  );

  wrapper.find('button').simulate('click');
  
  const actions = store.getActions();
  expect(actions).toEqual([{ type: 'INCREMENT' }]);
});

В этом примере мы инициируем клик по кнопке и проверяем, что mock store получил действие INCREMENT. Метод getActions() позволяет получить список всех отправленных действий и проверить их содержание.

Тестирование асинхронных действий

Для тестирования асинхронных действий, которые могут быть использованы в Redux, таких как те, которые обрабатываются через middleware redux-thunk, необходимо применить дополнительные инструменты.

redux-mock-store поддерживает асинхронные действия, что позволяет протестировать компоненты, взаимодействующие с внешними API или выполняющие другие асинхронные операции.

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

import React, { useEffect } from 'react';
import { connect } from 'react-redux';

const FetchData = ({ data, fetchData }) => {
  useEffect(() => {
    fetchData();
  }, [fetchData]);

  if (!data) return <p>Loading...</p>;

  return <p>{data}</p>;
};

const mapStateToProps = (state) => ({
  data: state.data,
});

const mapDispatchToProps = (dispatch) => ({
  fetchData: () => dispatch(fetchDataAction()),
});

export default connect(mapStateToProps, mapDispatchToProps)(FetchData);

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

Пример теста для асинхронного действия:

import { mount } from 'enzyme';
import { Provider } from 'react-redux';
import { createMockStore } from 'redux-mock-store';
import thunk from 'redux-thunk';
import { fetchDataAction } from './actions';
import FetchData from './FetchData';

const mockStore = createMockStore([thunk]);
const initialState = { data: null };
const store = mockStore(initialState);

describe('<FetchData />', () => {
  it('dispatches fetchData action and renders data', async () => {
    const mockData = 'Some data';
    store.dispatch = jest.fn().mockResolvedValue({ type: 'FETCH_DATA_SUCCESS', payload: mockData });

    const wrapper = mount(
      <Provider store={store}>
        <FetchData />
      </Provider>
    );

    await wrapper.update(); // Обновляем компонент после асинхронной операции

    expect(store.dispatch).toHaveBeenCalledWith(fetchDataAction());
    expect(wrapper.find('p').text()).toBe(mockData);
  });
});

В этом примере создаётся mock store с middleware redux-thunk, после чего мы проверяем, что асинхронное действие fetchDataAction было вызвано, и компонент корректно отобразил данные.

Использование Enzyme для глубокого рендеринга и манипуляции

Enzyme предоставляет несколько методов для рендеринга компонентов: shallow, mount, render. В случае с Redux, рекомендуется использовать метод mount, так как он позволяет рендерить компоненты с полным DOM, что необходимо для тестирования взаимодействия с Redux store.

Метод shallow обычно используется для поверхностного рендеринга компонента, что не позволяет корректно проверить работу с Redux, так как в этом случае компонент не будет связан с настоящим store.

Заключение

Тестирование компонентов с подключением к Redux с использованием Enzyme требует правильной настройки mock store, симуляции действий и проверки взаимодействия с Redux. Важными аспектами являются проверка рендеринга компонента с состоянием Redux, тестирование отправки действий через dispatch, а также проверка асинхронных операций через middleware. Эти методы помогают гарантировать, что компонент будет правильно работать в реальном приложении с Redux.

Оглавление