Тестирование компонентов высшего порядка с использованием шутки и энзима

Question

Я создал тест для компонента более высокого порядка, но всякий раз, когда я запускаю тест, я получаю эту ошибку: Invariant Violation: Could not find "store" in either the context or props of "Connect(ExampleComponent)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(ExampleComponent)".

Я думаю, что это может иметь какое-то отношение к тому, как я скомпоновал HOC в качестве анонимной функции, где я не могу экспортировать функцию соединения, но я не уверен, как это исправить. Любая помощь / совет будет принята с благодарностью.

HOCExample.js

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

export default ComposedComponent => {
  class ExampleComponent extends PureComponent {
    //some logic here
    render() {
      return (
          <div style={{ marginTop: 80 }}>
            <ComposedComponent {...this.props} />
          </div>
        )
      );
    }
  }

  ExampleComponent.contextTypes = {
    test: PropTypes.func.isRequired,
    example: PropTypes.func.isRequired
  };

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

  const mapDispatchToProps = { getExampleCount };

  return connect(
    mapStateToProps,
    mapDispatchToProps
  )(ExampleComponent);
};

HOCExample.test.js

import React from 'react';
import { shallow } from 'enzyme;'
import { default as HOCExample } from '../HOCExample';

const TestComponent = () => <h1>Test</h1>

const ComponentRendered = HOCExample(TestComponent)

describe('HOCExample', () => {
  const props = {
    example: []
  };

  it('renders authorized component', () => {
    const wrapper = shallow(<ComponentRendered {...props} />);
    expect(wrapper).toMatchSnapshot();
  });

  afterEach(() => {
    jest.clearAllMocks();
  });
});

Answer 1

Вы не передаете хранилище тестируемому компоненту.

Следующая статья является хорошим ресурсом о том, как настроить тест https://medium.com/@visualskyrim/test-your-redux-container-with-enzyme-a0e10c0574ec

redux-mock-store isполезен при издевательстве над магазином.

import configureMockStore from 'redux-mock-store';
const createMockStore = configureMockStore();
const defaultState = {} // whatever you want the default store state to be
const store = createMockStore(defaultState);

//helper wrapper function
const giveStore = (component, store) => {
  const context = {
    store,
  };
  return shallow(component, { context });
};

const wrapper = giveStore(<ComponentRendered {...props} />, store);

Вы можете реорганизовать это в отдельный вспомогательный файл и сделать его многократно используемым, например, передавая дополнительные параметры в помощник giveStore и передавая эти реквизиты тестируемому компоненту (например,.история).

Answer 2

Это решается, как следует из сообщения об ошибке, то есть с Provider:

const wrapper = shallow(<Provider store={dummyStore}><ComponentRendered {...props} /></Provider>);

Где dummyStore - хранилище Redux, которое, например, соответствует регистру, имеет свойство example.