unit testing एंजाइम-<इनपुट> मान कैसे एक्सेस और सेट करें?




unit-testing reactjs (9)

मैं मान सेट करने के लिए Wrapper के सेटवैल्यू [ https://vue-test-utils.vuejs.org/api/wrapper/#setvalue-value] पद्धति का उपयोग करता हूं।

inputA = wrapper.findAll('input').at(0)
inputA.setValue('123456')

mount का उपयोग करते समय मैं <input> मूल्य का उपयोग करने के बारे में उलझन में हूं। यहाँ मैं अपने परीक्षण के रूप में मिला है:

  it('cancels changes when user presses esc', done => {
    const wrapper = mount(<EditableText defaultValue="Hello" />);
    const input = wrapper.find('input');

    console.log(input.render().attr('value'));
    input.simulate('focus');
    done();
  });

कंसोल undefined प्रिंट करता है। लेकिन अगर मैं कोड को थोड़ा संशोधित करता हूं, तो यह काम करता है:

  it('cancels changes when user presses esc', done => {
    const wrapper = render(<EditableText defaultValue="Hello" />);
    const input = wrapper.find('input');

    console.log(input.val());
    input.simulate('focus');
    done();
  });

के अलावा, ज़ाहिर है, input.simulate लाइन विफल रहता है क्योंकि मैं अब render का उपयोग कर रहा हूँ। मुझे दोनों को ठीक से काम करने की जरूरत है। मैं यह कैसे तय करुं?

संपादित करें :

मुझे उल्लेख करना चाहिए, <EditableText /> एक नियंत्रित घटक नहीं है। लेकिन जब मैं defaultValue को <input /> में पास करता हूं, तो यह मान सेट करता है। ऊपर दूसरा कोड ब्लॉक मान का प्रिंट आउट करता है, और इसी तरह अगर मैं क्रोम में इनपुट तत्व का निरीक्षण करता हूं और कंसोल में $0.value टाइप करता $0.value , तो यह अपेक्षित मान दिखाता है।


उपरोक्त में से किसी ने भी मेरे लिए काम नहीं किया। यह मेरे लिए एंजाइम पर काम किया है ^ 3.1.1:

input.instance().props.onChange(({ target: { value: '19:00' } }));

यहाँ संदर्भ के लिए कोड है:

const fakeHandleChangeValues = jest.fn();
  const fakeErrors = {
    errors: [{
      timePeriod: opHoursData[0].timePeriod,
      values: [{
        errorIndex: 2,
        errorTime: '19:00',
      }],
    }],
    state: true,
  };
const wrapper = mount(<AccessibleUI
    handleChangeValues={fakeHandleChangeValues}
    opHoursData={opHoursData}
    translations={translationsForRendering}
  />);
const input = wrapper.find('#input-2').at(0);
input.instance().props.onChange(({ target: { value: '19:00' } }));
expect(wrapper.state().error).toEqual(fakeErrors);

.simulate() किसी तरह से मेरे लिए काम नहीं करता है, मैंने इसे सिर्फ node.value एक्सेस करने के साथ काम किया है। कॉल करने की आवश्यकता के बिना .simulate() ; आपके मामले में:

const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input').at(0);

// Get the value
console.log(input.node.value); // Hello

// Set the value
input.node.value = 'new value';

// Get the value
console.log(input.node.value); // new value

आशा है कि यह दूसरों के लिए मदद करता है!


एंजाइम 3 के साथ, यदि आपको एक इनपुट मूल्य बदलने की आवश्यकता है, लेकिन onChange फ़ंक्शन को फायर करने की आवश्यकता नहीं है, तो आप ऐसा कर सकते हैं ( node संपत्ति हटा दी गई है ):

wrapper.find('input').instance().value = "foo";

यदि आप उस के लिए (यानी, नियंत्रित घटकों के लिए) एक प्रस्ताव रखते हैं, तो आप onChange को लागू करने के लिए wrapper.find('input').simulate("change", { target: { value: "foo" }}) उपयोग कर सकते हैं wrapper.find('input').simulate("change", { target: { value: "foo" }}) )।


मेरे मामले में मैं रेफरी कॉलबैक का उपयोग कर रहा था,

  <input id="usuario" className="form-control" placeholder="Usuario"
                                                       name="usuario" type="usuario"
                                                       onKeyUp={this._validateMail.bind(this)}
                                                       onChange={()=> this._validateMail()}
                                                       ref={(val) =>{ this._username = val}}
                                                    >

मान प्राप्त करना। तो एंजाइम इस का मान नहीं बदलेगा।

इसलिए मुझे यह करना पड़ा:

login.node._username.value = "[email protected]";
    user.simulate('change');
    expect(login.state('mailValid')).toBe(true);

मान सेट करने में सक्षम होने के लिए तब परिवर्तन कॉल करें। और फिर मुखर।


यहाँ बहुत सारे विभिन्न मत हैं। मेरे लिए काम करने वाली एकमात्र चीज उपरोक्त में से कोई नहीं थी, यह input.props().value का उपयोग कर input.props().value थी। मुझे आशा है कि वह मदद करेंगे।


मुझे लगता है कि तुम क्या चाहते हो:

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

यहाँ मेरा स्रोत है

मूल्य निर्धारित करने के लिए आपको कहीं भी render() का उपयोग render() आवश्यकता नहीं है। और सिर्फ FYI करें, आप दो अलग-अलग render() का उपयोग कर रहे हैं। आपके पहले कोड ब्लॉक में से एक एंजाइम से है, और आवरण ऑब्जेक्ट mount पर एक विधि है और आपको दे। दूसरा एक, हालांकि यह 100% स्पष्ट नहीं है, संभवतः react-dom से एक है। यदि आप एंजाइम का उपयोग कर रहे हैं, तो केवल shallow उपयोग करें या उचित रूप से mount करें और react-dom से render की कोई आवश्यकता नहीं है।


यहाँ मेरा कोड है ..

const input = MobileNumberComponent.find('input')
// when
input.props().onChange({target: {
   id: 'mobile-no',
   value: '1234567900'
}});
MobileNumberComponent.update()
const Footer = (loginComponent.find('Footer'))
expect(Footer.find('Buttons').props().disabled).equals(false)

मेरे पास componentname.update() DOM.update componentname.update() और फिर सबमिट बटन सत्यापन (अक्षम / सक्षम) की लंबाई 10 अंकों के साथ अपने डोम को अपडेट करना है।


मैं create-react-app का उपयोग कर रहा हूं जो डिफ़ॉल्ट रूप से कीट के साथ आता है और 2.7.0 एंजाइम है।

यह मेरे लिए काम किया:

const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input')[index]; // where index is the position of the input field of interest
input.node.value = 'Change';
input.simulate('change', input);
done();






enzyme