प्रतिक्रिया और एंजाइम

Question

के साथ टेस्ट सेटिंग टेक्स्ट मान आप टेक्स्ट इनपुट का टेक्स्ट कैसे सेट करते हैं और उसके बाद रीएक्ट/एंजाइम के साथ इसका मान परीक्षण करते हैं?

const input = wrapper.find('#my-input'); 

input.simulate('change', 
    { target: { value: 'abc' } } 
); 

const val = input.node.value; 

//val is '' 

सभी solutions here काम करने के लिए नहीं दिखाई देते हैं ..

Answer 1

वास्तव में समझने के क्या अपने कोड में क्या हो रहा है यह अपने घटक कोड (विशेष रूप से अपने onChange हैंडलर को देखने के लिए उपयोगी होगा।

हालांकि, में

input.simulate('change', {target: {value: 'abc'}}); 

यह वास्तव में अपनेका मूल्य नहीं बदलेगा: निम्न कोड के संबंध 10 तत्व, इसके बजाए यह आपके onChange फ़ंक्शन को चलाने के लिए कारण बनता है और एक ईवेंट ऑब्जेक्ट प्रदान किया जाता है जो {target: {value: 'abc'}} जैसा दिखता है।

विचार यह है कि आपका onChange फ़ंक्शन आपके राज्य या स्टोर को अपडेट करेगा, इसलिए इस फ़ंक्शन को ट्रिगर करने से आपका DOM अपडेट हो रहा है। यदि आपके पास वास्तव में हैंडलर input.simulate('change') का उपयोग करके परिभाषित नहीं है, तो कुछ भी नहीं करेगा।

तो, अपने लक्ष्य को वास्तव में एक इनपुट का मान सेट और एक onChange हैंडलर ट्रिगर नहीं है तो आप जे एस का उपयोग कर सकते मैन्युअल wrapper.find('#my-input').node.value = 'abc'; की तरह कुछ का उपयोग कर लेकिन इस circumventing है डोम अद्यतन करने के लिए प्रतिक्रिया के चक्र प्रस्तुत करना और आप की संभावना हूँ यदि आप फिर से प्रस्तुत करने के लिए कुछ भी करते हैं तो यह मान साफ़/हटा दिया गया है।

Answer 2

मैं React 16 और Enzyme 3.10 यहाँ पर उपयोग कर रहा हूँ और यह पूरी तरह से (वहाँ भी कई अलग अलग सुझावों को आज़माने के बाद) मेरे लिए काम किया: जाहिर है, पिछले संस्करणों में आप इस्तेमाल कर सकते हैं

wrapper.find("input").instance().value = "abc"; 

node या बजाय getNode()instance(), जो मेरे पिछले कई प्रयासों के कुछ भाग थे।

Answer 3

यह दोनों एनजाइम 3 और एनजाइम 2 के लिए काम करता है:

wrapper.find('input').getDOMNode().value = 'new value'; 
wrapper.find('input').simulate('change'); 

.getDOMNode() एनजाइम में तरह एनजाइम 2 में .node की तरह इस्तेमाल किया जा सकता है और .instance() 3.