У меня есть интеллектуальный компонент, пытающийся написать модульный тест (тесты DOM) - появляется следующая ошибка: Не уверен, почему я получаю эту ошибку, даже если я передаю реквизиты в тесте ..?
Неизменяемое нарушение: не удалось найти "store" ни в контексте, ни в свойствах "Connect (myComponent)". Либо оберните корневой компонент в a, либо явно передайте «store» в качестве опоры для «Connect (myComponent)».
Обновленная новая ошибка: TypeError: невозможно прочитать свойство mainData для undefined в mapStateToProps
тестовый код:
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import { renderComponent, expect } from '../../test_helper';
import myComponent from '../../../src/containers/myComponent';
describe('myComponent', () => {
const mockStore = configureMockStore();
let connectedApp,
store,
initialItems;
let component;
let componentRender;
beforeEach(() => {
const DataMock = [1, 2, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0,
0, 1, 2, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 1,
2, 0, 0, 0, 0, 0];
const props = {
mainData: DataMock,
abc: 'def',
subData: {
test: '1',
testing: 12,
},
userID: '1',
Date: 'jan11',
};
initialItems = ['one'];
const initialState = {
items: initialItems
};
store = mockStore(initialState);
component = TestUtils.renderIntoDocument(
<Provider store={store}><myComponent {...props} /></Provider>);
componentRender = ReactDOM.findDOMNode(component);
});
it('loads', () => {
expect(component).to.exist;
});
});
этот myComponent является дочерним элементом немого компонента
Код myComponent:
import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions/component_actions';
class myComponent extends Component {
constructor(props) {
super(props);
this.state = {
someString: 'abc',
someotherstring: 'def',
};
}
componentDidMount() {
const { test1, test2, test3 } = this.props;
this.props.fetchEntriesDefault(test1, test2, test3);
this.props.fetchAnalyticsMainView(test1, test2, test3);
}
render() {
return (
<div className="container">
</div>
);
}
}
function mapStateToProps(state) {
return {
mainData: state.reducerName.mainData,
subDataData: state.reducerName.subDataData,
};
}
myComponent.propTypes = {
mainData: PropTypes.array,
abc: PropTypes.string,
subDataData: PropTypes.object,
userID: PropTypes.string,
actioncreatorfuncone: PropTypes.func,
actioncreatorfunctwo: PropTypes.func,
date: PropTypes.string,
};
export default connect(mapStateToProps, actions)(myComponent);