How can we test the onSubmit on a redux-form

[Sudakatux]

I would like to be able to test the onSubmit on a redux-form I imagine something like this so if there are validations that stop the form form being submitted the spy function passed in the onSubmit = {spy} will not be called. If all the validations are ok . Say for example every Required field is completed, spy.called should be true.

Example

So if i had in my component :

return enzyme.shallow( <Stateless {...requiredProps} {...props} onSubmit={spy} />

Where spy is a const spy = sinon.spy(); And in the component i had this :

  <button
            className={classnames(style.button, style.login, {
                [style.disabled]: invalid || submitting
            })}
            type="submit"
            onClick={this.props.handleSubmit}> 

How can i simulate a click to check if the form is going to be submitted or stopped from being submitted by validators.

If I do this :

    const component = shallow();
    component.find('button').simulate('click'); 

[tylercollier]

The line you originally linked (from here) is from the unit test, which says at the top:

// In this file we're doing unit testing of our component, which means it
// really has nothing to do with Redux-Form at this point. We can pass in our
// own props (e.g. `submitting`) and make sure our form renders as we expect.

What you'll want to do is use the integration test. For example, here's how you submit the form. Check out this line, which actually submits the form directly without using the button:

const form = subject.find('form')
...
form.simulate('submit')

This isn't as ideal as clicking the button itself, but should be equivalent as long as you're not doing anything extra with the button click aside from submitting the form. (Let me know if you are.) The reason you can't use the button itself is due to a limitation in Enzyme itself. See their simulate documentation, which says:

Common Gotchas

Currently, event simulation for the shallow renderer does not propagate as one would normally expect in a real environment. As a result, one must call .simulate() on the actual node that has the event handler set. Even though the name would imply this simulates an actual event, .simulate() will in fact target the component's prop based on the event you give it. For example, .simulate('click') will actually get the onClick prop and call it.

Note that the form's onSubmit logic will NOT run if the form is invalid!

[tylercollier]

@Sudakatux I realized I didn't read your question carefully enough. I'm sorry. I see you are using an onClick on your button. I'd never done it that way before.

In the submit-with-button branch, I added a couple test cases that show how it would work with submitting the form via the clicking the button, and how the onSubmit (onSave in example project's case) will not be called when the form is invalid.

If this answers your question satisfactorily, please close the case. If you have more questions, well, that's why I created this project was to help :-)

[tylercollier]

I'm closing this issue. Please comment and we can re-open if necessary.