Test react-final-form submit

Question

I have started migrating from redux-form to react-final-form to make my bundle smaller. I had couple of tests for my forms and one of them was to test that the correct action was called on form submit. Store action in my test never gets called after switching to react-final-form.

Is there a way ho to test submit function when form is passed as a property.

My test:

  it('submits the form', () => {
    const wrapper = shallowUntilTarget(<LoginFormContainer store={store} />, 'form');
    wrapper.find('form').simulate('submit');

    expect(store.getActions()).toEqual(expect.arrayContaining([{ formObj: {}, type: 'PATIENT_LOGIN_REQUEST' }]));
  });

shallowUntilTarget renders the actual form through container

Tested component:

class LoginForm extends React.Component<Props> {
  submitForm = (values) => {
    this.props.dispatch(actions.loginPatient(values));
  };

  render() {
    return (
      <Form
        onSubmit={this.submitForm}
        render={({ handleSubmit }) => (
          <form onSubmit={handleSubmit} />

After a quick look, that code seems fine to me. It's not working? What is going wrong? — Erik R.
It doesn't work. The submitForm function does not get called. I think that it is because submitForm is passed as a property. — Black
I don't see anything obviously wrong with that. The this.submitForm() is not getting called at all? And that way of simulating the submit works in Redux Form? — Erik R.
It was because of validator. I have removed it in the example to make it clearer, but it wasn't good. I will submit answer soon. — Black

Black Black · Accepted Answer · 2018-09-06T11:23:15

I was not able to test the validation with redux-form, but actually it is much easier to do in react-final-form. The form doesn't not get submitted and fails when validation is not successful. My LoginForm has email and password validation

<Form
 onSubmit={this.submitForm}
 validate={createValidator({
   email: [required, email],
   password: [required, minLength('8')],
 })}
 render={({ handleSubmit }) => (

There could be two tests. One testing failure and one testing successful submit. Both of them have to happened on mounted component.

  it('does not submits invalid form ', () => {
    const wrapper = mount(<LoginFormContainer store={store} />);

    wrapper.find('form').simulate('submit');
    expect(store.getState().lastAction).not.toEqual({ payload: {}, type: 'PATIENT_LOGIN_REQUEST' });
  });

  it('submits valid form', () => {
    const wrapper = mount(<LoginFormContainer store={store} />);

    const email = wrapper.find('input[name="email"]');
    email.instance().value = '[email protected]';
    email.simulate('change', email);

    const password = wrapper.find('input[name="password"]');
    password.instance().value = '12345678';
    password.simulate('change', password);

    wrapper.find('form').simulate('submit');

    expect(store.getState().lastAction).toEqual({
      payload: { email: '[email protected]', password: '12345678' },
      type: 'PATIENT_LOGIN_REQUEST',
    });
  });

Test react-final-form submit

1 Answers