how to read the children function properties in jest or enzyme - reactjs

Question

This is piece of my react component code:
<div style={{ width }}>
<FormField
label='Select a type'
labelPlacement='top'
className='cdsdrop'
>
{({ getButtonProps }) => (
<Dropdown
{...getButtonProps({
id: 'typeDropDown',
source: data,
onChange: this.handleInputChange,
options: data
})}
/>)}
</FormField>
</div>
Am new to jest framework. I started writing testcases for submit button and reset are disabled when dropdown value is empty, after selecting dropdown buttons should get enable.
When I use props().label am getting label but when I called children am getting error.
this is mytest component
describe('Buttons should be disabled on page load', () => {
it('submit and reset buttons are disabled when type is empty', () => {
const wrapper = shallow(<CdsNettingActions/>);
const submitButton = wrapper.find('WithStyles(Component).cdssubmit');
const resetButton = wrapper.find('WithStyles(Component).cdsreset');
const dropDown = wrapper.find('WithStyles(Component).cdsdrop');
const drop1=dropDown.props().children();
console.log('drop',drop1);
expect(submitButton.prop('disabled')).toEqual(true);
expect(resetButton.prop('disabled')).toEqual(true);
});
});
But am getting below error:
TypeError: Cannot read property 'getButtonProps' of undefined
className='cdsdrop'>
When I did the console logging the children function looks as below:
getButtonProps({
id: 'typeDropDown',
borderless: true,
buttonWidth: width,
source: data,
onChange: _this4.handleInputChange,
options: data
}))
Please help me how to read options from the dropdown.
I am using shollow strong textreact 16

Answer 1

So your FormField's children prop is a callback that expects an object with getButtonProps property:
{({ getButtonProps }) => (
That's why when you just do
const drop1=dropDown.props().children();
it crashes - there is no object with getButtonProps. You may pass this argument, but next you will find drop1 variable contains React object, not Enzyme's ShallowWrapper. So any checks like expect(drop1.prop('something')).toEqual(2) will fail "prop is not a function".
So you either use renderProp():
const drop1 = dropDown.renderProp('children')({
getButtonProps: () => ({
id: 'typeDropDown',
borderless: true,
buttonWidth: someWidth,
source: mockedSource,
onChange: mockedOnChange,
options: mockedOptions
})
});
Or maybe it's much easier to use mount() instead.