integration test --> TypeError: Cannot read property 'displayName' of undefined

[jpabbuehl]

Hi everyone,

I got a question about the integration test. I have followed your approach but I cannot succeed in mounting nested connected components. I I dont see this error when I run this repo. (maybe it's due to an update of enzyme/mount ?)
After adding a new HOC to my reduxForm, I believe I lose access to the previous one, as seen in this error:

TypeError: Cannot read property 'displayName' of undefined

  at getDisplayName (node_modules/redux-form/lib/util/getDisplayName.js:9:14)
  at node_modules/redux-form/lib/createReduxForm.js:675:65
  at Object.<anonymous> (containers/SignUpContainer.js:6:67)
  at Object.<anonymous> (__test__/SignUp.test.js:10:24)
      at Generator.next (<anonymous>)
      at Promise (<anonymous>)
      at Generator.next (<anonymous>)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

here's my component

import TextField from "material-ui/TextField";
import Button from "material-ui/Button";
import Field from "redux-form";

export let renderTextField = ({
  input,
  label,
  meta: { touched, error },
  ...custom
}) => <TextField label={label} placeholder={label} {...input} {...custom} />;

export let SignUp = props => (
  <div>
    <form>
      <Field
        name="username"
        component={renderTextField}
        type="email"
        label="Email"
      />
      <Field
        name="password"
        component={renderTextField}
        type="password"
        label="Password"
      />
      <Button raised onClick={props.handleSubmit(props.signUp)}>
        Register
      </Button>
    </form>
  </div>
);

here's my container

import SignUp from "../components/SignUpComponent";
import { connect } from "react-redux";
import { reduxForm } from "redux-form";
import { reducer } from "../lib/redux_saga";

let SignUpContainer = reduxForm({ form: "formular" })(SignUp);

const mapStatetoProps = null

const mapDispatchToProps = dispatch => {
	return {
		init: () => {
			dispatch(reducer.init());
		},
		signUp: values => {
			dispatch(reducer.signUp(values.username, values.password));
		}
	};
};

const mergeProps = (stateProps, dispatchProps, ownProps) =>
	Object.assign({}, stateProps, dispatchProps, ownProps);

export default connect(mapStatetoProps, mapDispatchToProps, mergeProps)(
	SignUpContainer
); 

here's my test (jest+enzyme)

import { mount, configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import SignUpContainer from "../containers/SignUpContainer";
import { Provider } from "react-redux";
import { reducer as formReducer } from "redux-form";
import { createStore, combineReducers } from "redux";
import sinon from 'sinon'

configure({ adapter: new Adapter() });

describe.only("SignUpContainer Mount", () => {
  let store, container, props, init, signUp; 
  beforeEach(() => {
    init = sinon.spy();
    signUp = sinon.spy();
    props = {
      init,
      signUp
    };
    store = createStore(combineReducers({ form: formReducer }));
    container = mount(<Provider store={store}><SignUpContainer {...props} /></Provider>);
  });

  it("render successfully if string is not provided by store", () => {
    const form = container.find("form");
    const input = form.find("input").first();
    input.instance().value = "newusername"
    expect(wrapper.find(TextField).props().value).to.equal('');
    expect(container).toBeDefined();
  });
});

Done with react v16, redux v3.7.2, redux-form v7.1.2, material-ui v1.0.0-beta.20, jest v21.2.1, enzyme v3.1.1

i have tried unsuccessfully shallow(...).dive() as suggested here.

Thanks

[tylercollier]

@jpabbuehl Would you be willing to put your files into a small test repo so I can try running it? I haven't used dive myself but am willing to take a look.