在我构建的应用程序的早期,我按以下方式拆分组件中的Redux表单:

import React, { PropTypes } from 'react';
import { Field, reduxForm } from 'redux-form';
import {renderInput, required, email} from './FormInput';
import SubmitButton from './SubmitButton';

let LoginForm = ({errorMessage, handleSubmit, pristine, submitting}) => {

  return (
    <div>
      <form onSubmit={handleSubmit}>
      ...
      </form>
    </div>
  );
};

LoginForm = reduxForm({
  form: 'loginForm'
})(LoginForm);

export default LoginForm;

问题是在为此进行测试时,我从Enzyme返回的内容和浅层渲染是一个连接组件,其代码如下:

const wrapper = shallow(<LoginForm {...props}/>);

在包装容器上,它只是一个组件调用:

<LoginForm onSubmit={this.handleLogin} />

最终可能更多的是如何用ES6做这个问题,也许不确定 . 我们用redux-components做的是双重导出:

export class MyFakeContainer extends React.Component {
    ....
}

export default connect(mapStateToProps, mapDispatchToProps)(MyFakeContainer);

寻找有效如何做到这一点的建议 . 使用Jest和Enzyme