Redux फॉर्म सबमिट करने के लिए मूल्यों को खाली करें

Question

सबमिशन हैंडलर में मान हमेशा एक खाली वस्तु है। मैं इसे कुछ मूल्य कैसे पास करूं ताकि मैं संलग्न करने का परीक्षण कर सकूं?

परीक्षण:

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's 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()); 
    }); 
}); 

कंटेनर:

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); 

घटक:

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

समस्या यह है कि आप देख रहे हैं कि वास्तविक रूप कैसे काम करता है। यदि आप फ़ॉर्म पर submit ईवेंट अनुकरण करने का प्रयास करते हैं, तो उन मानों को निकालने के लिए Redux-form के लिए Redux store में संग्रहीत वास्तविक रूप मानों की आवश्यकता होती है और उन्हें onSubmit हैंडलर पर भेज दें।

मौलिक मुद्दा यह है कि आपको अपने यूनिट परीक्षणों के भीतर redux-form अंत-टू-एंड की कार्यक्षमता का परीक्षण नहीं करना चाहिए। परीक्षण करना यदि आपका ऐप एंड-टू-एंड काम करता है तो एकीकरण परीक्षण -लेवल पर होना चाहिए।

इस स्थिति में मेरे सुझाव

1. मान लें कि जब तक आप redux-form उचित प्रयोग कर रहे के रूप में, उस रूप-टू-स्टोर एकीकरण काम करता है।
2. यह सुनिश्चित करने के लिए परीक्षण लिखें कि redux-form-संबंधित घटक आपके द्वारा पारित किए गए कार्यों और मान सही हैं और सही तरीके से काम करते हैं।
3. परीक्षण घटकों और कंटेनर के बीच एक जुदाई बनाए रखें, यह लेख आपके लिए सुनिश्चित करें कि कार्यों यह पैदा करता है व्यवहार करते हैं जैसे कि आप उम्मीद कर a nice overview on how to test connected components

तो परीक्षण mapDispatchToProps अच्छी तरह से देना चाहिए। फिर सुनिश्चित करें कि आप सही घटकों को पार कर रहे हैं और अपने घटकों और कंटेनरों के भीतर सही जगहों पर प्रोप कर रहे हैं। उसके बाद आप सुरक्षित रूप से यह मान सकते हैं कि जब तक आप रेडक्स और रेडक्स-फॉर्म का उपयोग कर रहे हों तब तक सब कुछ काम करता है।

आशा है कि इससे मदद मिलती है!

Answer 2

simulate एक दूसरा पैरामीटर जो घटना वस्तु है स्वीकार करता है।

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