Я создал тест для компонента более высокого порядка, но всякий раз, когда я запускаю тест, я получаю эту ошибку: 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 как анонимную функцию, в которой я не могу экспортировать функцию подключения, но я не уверен, как я могу это исправить. Любая помощь / совет будут очень благодарны.
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);
};
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();
});
});



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Это решается согласно сообщению об ошибке, то есть с помощью Provider:
const wrapper = shallow(<Provider store = {dummyStore}><ComponentRendered {...props} /></Provider>);
Где dummyStore - это хранилище Redux, которое соответствует случаю, например, имеет свойство example.
Вы не передаете хранилище тестируемому компоненту.
Следующая статья - хороший источник информации о том, как настроить тестовый https://medium.com/@visualskyrim/test-your-redux-container-with-enzyme-a0e10c0574ec.
redux-mock-store помогает имитировать магазин.
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 и передать эти свойства тестируемому компоненту (например, history).