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} />

Answer 1

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 = 'cerny@seznam.cz';
    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: 'cerny@seznam.cz', password: '12345678' },
      type: 'PATIENT_LOGIN_REQUEST',
    });
  });