У меня есть связанный компонент с формой и кнопкой. При модульном тестировании компонента с использованием монтирования я получаю сообщение об ошибке «Действия должны быть простыми объектами».
Это происходит из-за вызовов redux, выполняемых в методе handleSubmit, есть ли способ имитировать эти вызовы.
import React from "react";
import {Provider} from "react-redux";
import configureStore from "redux-mock-store";
import {Props, InitialState} from "../mock_data/mock.data.jsx";
const mockStore = configureStore();
let store = mockStore(InitialState);
const params = {
url: "http://localhost:9879"
};
let props = {};
beforeEach(() => {
// reset props before each test
props = JSON.parse(JSON.stringify(Props));
props.actions = {};
props.email = Props.email;
props.params = params;
});
handleSubmit({ values }) {
const {url} = this.props;
const val = values.valcode;
this.props.actions.getCode(url);
this.props.makeExternalCall(val);
}
return (
<Form
initialValues = {{ ...personalUser }}
onSubmit = {this.handleSubmit}>
{
({ form, errors }) => {
const isDisabled = errors !== null || this.state.disableReset;
return (
<div>
<button name = "btnConfirm" type = "submit"
className = {styles.btnConfirm} disabled = {isDisabled}>/>
</button>
</div>
);
}
}
</Form>
);
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators(actions, dispatch),
makeExternalCall: bindActionCreators(makeExternalCallAction, dispatch)
});
export default connect(null, mapDispatchToProps)(injectIntl(TestComponent));
Контрольная работа
it(" - should display the proper label", () => {
props.error = "This is an error message";
props.actions.getCode = sinon.stub().returns({
then: () => {}
});
props.makeExternalCall = sinon.stub().returns({
then: () => {}
});
store = mockStore(props);
const wrapper = mountWithIntl(<Provider store = {store}>
<TestComponent {...props}/>
</Provider>);
expect(wrapper).to.not.be.null;
expect(wrapper.find("button").prop("disabled")).equals(true);
wrapper.find("TestComponent").get(0).handleSubmit({values:{valcode: "AkPdQ2" }});
});
Можно ли издеваться над mapDispatchToProps, который выдает ошибку
PhantomJS 2.1.1 (Mac OS X 0.0.0) <TestComponent Component /> - should display the proper label FAILED
Actions must be plain objects. Use custom middleware for async actions.
Да, я использую mockStore





Вы добавили промежуточное ПО
redux-thunkв конфигурациюredux-mock-store, как указано в следующей ссылке github.com/arnaudbenard/redux-mock-store#asynchronous-action? (Предполагая, что вы используетеredux-mock-storeиз-за функцииmockStore)