Redux onSubmit form empty object values ​​when testing

Question

Values ​​in the onSubmit handler are always an empty object. How to pass some values ​​so that I can test append?

Test:

const store = createStore(combineReducers({ form: formReducer })); const setup = (newProps) => { const props = { ...newProps, }; expect.spyOn(store, 'dispatch'); const wrapper = mount( <Provider store={store}> <RegisterFormContainer {...props} /> </Provider>, ); return { wrapper, props, }; }; describe('RegisterFormContainer.integration', () => { let wrapper; it('should append form data', () => { ({ wrapper } = setup()); const values = { userName: 'TestUser', password: 'TestPassword', }; expect.spyOn(FormData.prototype, 'append'); // Passing values as second argument DOESN'T work, it just an empty object wrapper.find('form').simulate('submit', values); Object.keys(values).forEach((key) => { expect(FormData.prototype.append).toHaveBeenCalledWith(key, values[key])); }); expect(store.dispatch).toHaveBeenCalledWith(submit()); }); }); 

Container:

 const mapDispatchToProps = dispatch => ({ // values empty object onSubmit: (values) => { const formData = new FormData(); Object.keys(values).forEach((key) => { formData.append(key, values[key]); }); return dispatch(submit(formData)); }, }); export default compose( connect(null, mapDispatchToProps), reduxForm({ form: 'register', fields: ['__RequestVerificationToken'], validate: userValidation, }), )(RegisterForm); 

component:

 const Form = ({ error, handleSubmit }) => ( <form onSubmit={handleSubmit} action=""> <Field className={styles.input} name="username" component={FormInput} placeholder="Username" /> <button type="submit"> Register </button> </form> ); 

Answer 1

The problem is that you do not notice how the actual form works. If you try to simulate a submit event on a form, then the actual values ​​of the forms must be stored in the reduction store, so that the reduction form retrieves these values ​​and onSubmit them to the onSubmit handler.

The main problem is that you do not have to test the functionality of redux-form from end to end in your unit tests. Testing, if your application runs from end to end, should take place at the integration testing level.

My suggestions in this situation

• Suppose, as long as you use redux-form correctly, that integrating form with repository works.
• Write tests to ensure that the functions and values ​​you pass to redux-form components are correct and work correctly.
• Maintain separation between test components and containers, this article should give you a good overview of how to test connected components

So, thoroughly test mapDispatchToProps to make sure that the functions performed behave as you expect. Then make sure that you pass the correct functions and details to the right places in your components and containers. After that, you can safely assume that everything works as long as you use reduction and reduction to the right.

Hope this helps!

Answer 2

simulate accepts the second parameter, which is the event object.

 wrapper.find('form').simulate('submit', { target });