सेट नहीं कर सकता के मूल्य का चयन करें तत्व घटक के अंदर के साथ एंजाइम

0

सवाल

मैं कोशिश कर रहा हूँ करने के लिए निर्धारित मूल्य के लिए एक का चयन करें तत्व के अंदर Dropdown घटक है, लेकिन परीक्षण असफल रहता है.

यहाँ है एक codesandbox के घटक परीक्षण करने के लिए.

it('should execute onChange once and change value to "item2"', () => {
        const onChangeMock = jest.fn();
        const wrapper = mount(
            <Dropdown{ ...args } 
                onChange={ onChangeMock } 
                listItems={ ['item1', 'item2', 'item3'] } />
        );

    
        wrapper.find('select').simulate('change', { value: 'item2' });

        console.log(wrapper.debug());
        console.log(wrapper.find('select').props());
        
        expect(wrapper.find('select').props().value).toBe('item2');
        expect(onChangeMock.mock.calls.length).toBe(1);
    });

के बाद उत्पादन चल रहा है npm run test:

 expect(received).toBe(expected) // Object.is equality
 Expected: "item2"
 Received: undefined

 51 |         console.log(wrapper.find('select').props());
 52 |         
 53 |         expect(wrapper.find('select').props().value).toBe('item2');
    |                                                      ^
 54 |         expect(onChangeMock.mock.calls.length).toBe(1);
 55 |     });
 56 | });
console.log
    <Dropdown id="" name="" label="" placeholder="" errorMessage="" valid={false} required={false} listItems={{...}} onChange={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: Object [Object: null prototype] { calls: [ [ SyntheticBaseEvent { _reactName: 'onChange', _targetInst: [Object], type: 'change', nativeEvent: [Object], target: [Object], currentTarget: null, eventPhase: undefined, bubbles: undefined, cancelable: undefined, timeStamp: 1637655017281, defaultPrevented: undefined, isTrusted: undefined, isDefaultPrevented: [Function: functionThatReturnsFalse], isPropagationStopped: [Function: functionThatReturnsFalse], value: 'item2', _dispatchListeners: null, _dispatchInstances: null } ] ], instances: [ undefined ], invocationCallOrder: [ 1 ], results: [ Object [Object: null prototype] { type: 'return', value: undefined } ] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }}>
      <div className="med-dropdown">
        <label htmlFor="" className="med-dropdown__label">
           (Optional)
        </label>
        <select id="" name="" className="med-dropdown__select false" defaultValue={0} onChange={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: Object [Object: null prototype] { calls: [ [ SyntheticBaseEvent { _reactName: 'onChange', _targetInst: [Object], type: 'change', nativeEvent: [Object], target: [Object], currentTarget: null, eventPhase: undefined, bubbles: undefined, cancelable: undefined, timeStamp: 1637655017281, defaultPrevented: undefined, isTrusted: undefined, isDefaultPrevented: [Function: functionThatReturnsFalse], isPropagationStopped: [Function: functionThatReturnsFalse], value: 'item2', _dispatchListeners: null, _dispatchInstances: null } ] ], instances: [ undefined ], invocationCallOrder: [ 1 ], results: [ Object [Object: null prototype] { type: 'return', value: undefined } ] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} onFocus={[Function: onFocus]} onBlur={[Function: onBlur]} disabled={[undefined]}>
          <option disabled={true} value={0} />
          <option value="item1">
            item1
          </option>
          <option value="item2">
            item2
          </option>
          <option value="item3">
            item3
          </option>
        </select>
      </div>
    </Dropdown>
enzyme jestjs reactjs
2021-11-23 08:17:33
1

सबसे अच्छा जवाब

0

आप अनुकरण कर रहे हैं onChange जब इसका मतलब है जो इकाई परीक्षण की कोशिश करेंगे कॉल करने के लिए onchange, ठट्ठा समारोह पर अमल करेंगे (लटकती मूल्य अभ्यस्त बदला जा सकता है - कि वास्तविक कोड नहीं ठट्ठा कोड)

जिसका अर्थ है उम्मीद(समझना) की उम्मीद के घटक के मूल्य को बदलने के लिए जब आप कॉल "परिवर्तन" घटना के माध्यम से (अनुकरण) गलत है

तो, onChange={ onChangeMock } का कारण बनता ठट्ठा (मज़ाक.एफ एन()) करने के लिए क्रियान्वित किया जा (के बजाय घटक के "वास्तविक कोड")

क्या सही है की उम्मीद है(आदमी) यह है कि जब आप अनुकरण "परिवर्तन" घटना के लिए अपने घटक (कोड के माध्यम से wrapper.find('select').simulate('change', { value: 'item2' }); ), तो onChange घटना शुरू हो जाना चाहिए, जो सही ढंग से मान्य कोड के माध्यम से expect(onChangeMock.mock.calls.length).toBe(1);

पर एक थोड़ा स्पर्शरेखा ध्यान दें, परीक्षण नहीं "परिवर्तन" घटना - एक उपयोगकर्ता अभ्यस्त कोड का प्रयोग करें (परिवर्तन घटना) का चयन करने के लिए लटकती मूल्य तो आप परीक्षण नहीं किया जाना चाहिए कि. और आप की जरूरत नहीं है का परीक्षण करने के लिए देशी कार्यक्षमता या तो. आप उपयोग कर सकते हैं स्नैपशॉट परीक्षण अगर आप की तरह करने के लिए सुनिश्चित करें कि जब आप परिवर्तन value के <select>, नए मूल्य प्रदर्शित किया जाता है । संबंधित पढ़ना: https://kentcdodds.com/blog/testing-implementation-details

2021-12-03 10:53:09

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में