Form values on the unit test

[pbreah]

Tyler,

Thanks for your awesome example. I was following your example, but there is a case that is missing: how to access the field values on your unit test with shallow renderer?

on my onSubmit handler on my component I'm using:

handleFormSubmit() {
  const field_value = this.props.fields.myfieldname.value;
}

I tried adding my own implementation of the redux-form "onChange" to use enzyme like this:

component.setProps({ fields: { myfield: { value: e.target.value, touched: false, error: '' } })

to set the field value props on the fly when onChange triggers for each field, but still having a hard time setting/getting these props with enzyme as they are not set when pulling them with component.props().prop_name on the test code nor on the component itself cannot access them with: this.props.fields.myfield.value

How would you set the field value props, so that on the component code I could access the values via:

this.props.fields.field_name.value

It would be great to see this in action on your example.

Thanks

[Tyler Collier]

Good question. I think there's a problem with enzyme's setProps. IIRC it doesn't work as expected and is a known issue. I don't remember the details at the moment, or how to get around it. I am on vacation at the moment and will be back around August 22 and will be happy to look into it then. In the meantime, would using redux form's initialValues help?

[pbreah]

Great, looking forward to a way to approach this.

I am using the non decorated version of the form component, which I believe initialValues wouldn't apply in this case. Also my form is supposed to make API calls when a select control is changed, so setting initial values, wouldn't allow testing changing props over time. What I did was to capture the values on the onChange event handlers and storing them on the local state of the component, and passing my own mock action creators to simulate an API call that brings new props.

I tried several setups to set the props on a mock of the redux-form's handleSubmit (which wraps the call to my component's handleSubmit) but didn't worked out.

I look forward to your approach.

Thanks

[Tyler Collier]

I think I've added what you're looking for. See the diff, and note that it's on branch 4-form-values-shallow. It's mostly comments. You can switch to the branch and run the tests, and note that since I'm using Mocha's it.only syntax, it'll only run the one test I added.

Referring back to what you wrote:

on my onSubmit handler on my component I'm using:

handleFormSubmit() {
 const field_value = this.props.fields.myfieldname.value;
}

I don't think that's what you want to use at all. First of all, your handler should have a values parameter. And you don't want to read values from props. I'm not even sure if that'd technically work, but even if it sort of did, it wouldn't be what you wanted. Consider, if you used a normalizer to make your values uppercase, I think this.props.fields.myfieldname.value might give you myname, whereas the values.myfieldname would give you MYNAME, which is what you really want. So use the below:

handleFormSubmit(values) {
    // Use values.myfieldname here to do what you want
}

Does this help?

[Tyler Collier]

I hope the above helped. Let me know if not and I'll re-open.