Как написать модульный тест для компонента react, который вызывает mapStateToProps reduxjs?
я пытаюсь написать модульные тесты для компонента контейнера под названием AsyncApp
но я получаю следующую ошибку "mapStateToProps
должен возвращать объект. Вместо этого получил неопределенный."
это моя установка.
Root.js
import configureStore from '../configureStore';
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import AsyncApp from './AsyncApp';
const store = configureStore();
export default class Root extends Component {
render() {
return (
<Provider store={store}>
<AsyncApp />
</Provider>
);
}
}
configureStore.js
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from './reducers';
const loggerMiddleware = createLogger();
const createStoreWithMiddleware = applyMiddleware(
thunkMiddleware
//loggerMiddleware
)(createStore);
export default function configureStore(initialState) {
return createStoreWithMiddleware(rootReducer, initialState);
}
AsyncApp.js
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { foo } from '../actions';
import FooComponent from '../components/FooComponent';
class AsyncApp extends Component {
constructor(props) {
super(props);
this.onFoo= this.onFoo.bind(this);
this.state = {}; // <--- adding this doesn't fix the issue
}
onFoo(count) {
this.props.dispatch(foo(count));
}
render () {
const {total} = this.props;
return (
<div>
<FooComponent onFoo={this.onFoo} total={total}/>
</div>
);
}
}
function mapStateToProps(state) {
return state;
}
export default connect(mapStateToProps)(AsyncApp);
я store
на AsyncApp
в моем тесте, чтобы избежать получения следующего Ошибка Выполнения:Could not find "store" in either the context or props of "Connect(AsyncApp)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(AsyncApp)".
тест еще не завершен, потому что я не могу пройти мимо mapStateToProps
сообщение об ошибке.
AsyncApp-тест.js
jest.dontMock('../../containers/AsyncApp');
jest.dontMock('redux');
jest.dontMock('react-redux');
jest.dontMock('redux-thunk');
jest.dontMock('../../configureStore');
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
const configureStore = require( '../../configureStore');
const AsyncApp = require('../../containers/AsyncApp');
const store = configureStore();
//const asyncApp = TestUtils.renderIntoDocument(
//<AsyncApp store={store} />
//);
const shallowRenderer = TestUtils.createRenderer();
shallowRenderer.render(<AsyncApp store={store}/>);
я хочу в конце концов проверить это AsyncApp
содержит FooComponent
, и foo
действие передается при onFoo
называется.
то, что я пытаюсь сделать, достижимо? Правильно ли я поступаю?
1 ответов
предложение, которое я видел в нескольких местах, заключается в тестировании несвязанного компонента, в отличие от подключенной версии. Таким образом, убедитесь, что при передаче определенных реквизитов в компонент вы получаете ожидаемый результат визуализации, и убедитесь, что при передаче в состоянии с определенной формой ваш mapStateToProps()
возвращает ожидаемые части. Тогда вы можете ожидать, что они оба должны работать правильно, когда вместе взятые.