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