Próbowałem ustawić wartość dla elementu select wewnątrz Dropdown
składnik, ale badania nadal daje się zawiesza.
Oto kod polu składnika do testowania.
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);
});
Wniosek po uruchomieniu 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>