2

Early on with an app I built, I split out the Redux Form stuff in the component in the following way:

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;

The problem is when putting a test together for this, what I get back from Enzyme and a shallow render is a connected component with the following code:

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

On the wrapped container it is simply a component call:

<LoginForm onSubmit={this.handleLogin} />

Might end up being more of a question of how to do this with ES6 perhaps, not sure. What we've done with redux-components is a double export:

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

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

Looking for suggestions on how to do this effectively. Using Jest and Enzyme

mustaccio
  • 18,234
  • 16
  • 48
  • 57
kinabalu
  • 428
  • 1
  • 5
  • 10

0 Answers0