Модульное тестирование компонентов, подключенных к React-Redux, в Enzyme

У меня есть связанный компонент с формой и кнопкой. При модульном тестировании компонента с использованием монтирования я получаю сообщение об ошибке «Действия должны быть простыми объектами».

Это происходит из-за вызовов 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.

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

Yvonnick FRIN 24.04.2018 11:27

Да, я использую mockStore

Nayeem 24.04.2018 15:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
421
0

Другие вопросы по теме