We are currently trying to test a component that uses Material UI's SelectField (a dropdown menu). They use their own Popover component (https://github.com/callemall/material-ui/tree/master/src/DropDownMenu) to bypass the typical overflow: hidden; issue where parts of the overlay is clipped off. Essentially, they are mounting the children (the menu items of the dropdown) into the body.
Unfortunately, enzyme cannot find them this way. E.g.
selectField = mount(
<SelectField value={this.state.value} onChange={this.handleChange}>
<MenuItem value={1} primaryText="Never"/>
<MenuItem value={2} primaryText="Every Night"/>
<MenuItem value={3} primaryText="Weeknights"/>
<MenuItem value={4} primaryText="Weekends"/>
<MenuItem value={5} primaryText="Weekly"/>
</SelectField>
);
selectField.find(MenuItem).length === 0;
Are we missing any way to deal with this?
We are currently trying to test a component that uses Material UI's SelectField (a dropdown menu). They use their own Popover component (https://github.com/callemall/material-ui/tree/master/src/DropDownMenu) to bypass the typical
overflow: hidden;issue where parts of the overlay is clipped off. Essentially, they are mounting the children (the menu items of the dropdown) into the body.Unfortunately, enzyme cannot find them this way. E.g.
Are we missing any way to deal with this?