Not able to find Menu using component.find

[iaravindreddyp]

import {Dropdown, Menu} from 'antd';
class comp extends Component {
    state = {
      concept: 'Concept',
    }
 
    menuItemSelection=({key}) => {
      this.setState({
        concept: key
      })
    }

    menu = (
      <Menu onClick={this.menuItemSelection}>
        <Menu.Item key='ab'>ab</Menu.Item>
        <Menu.Item key='mw'>mw</Menu.Item>
        <Menu.Item key='va'>va</Menu.Item>
      </Menu>
   )

    render() {
      const {concept} = this.state
      return (
        <div>
            <Dropdown overlay={this.menu}>
              <div>{concept}</div>
            </Dropdown>
                 </div>
      )
    }
}

export default comp;

this is how my components looks like :
when hovered on DropDown the menu will appear and when clicked on any of the item the items gets selected and state variable concept gets updated. how to test this DropDown ? iam not able to access the Menu to simulate the 'click' on the menu

component = mount(<comp />) const dropdown = component.find(Dropdown) // this i am able to find const menuInstance = component.find(Menu) // this it is returning reactwrapper {length:0}
how to simulate the onclick on menu
i tried console logging the dropdown.props().overlay i got:

 { '$$typeof': Symbol(react.element),
      type: 
       { [Function: Menu]
         Divider: { [Function: Divider] propTypes: [Object], defaultProps: [Object] },
         Item: { [Function: MenuItem] contextTypes: [Object], isMenuItem: 1 },
         SubMenu: { [Function: SubMenu] contextTypes: [Object], isSubMenu: 1 },
         ItemGroup: 
          { [Function: MenuItemGroup]
            propTypes: [Object],
            defaultProps: [Object],
            isMenuItemGroup: true },
         defaultProps: 
          { prefixCls: 'ant-menu',
            className: '',
            theme: 'light',
            focusable: false },
         childContextTypes: { inlineCollapsed: [Function], antdMenuTheme: [Function] },
         contextTypes: { siderCollapsed: [Function], collapsedWidth: [Function] } },
      key: null,
      ref: null,
      props: 
       { onClick: [Function],
         children: [ [Object], [Object], [Object] ],
         prefixCls: 'ant-menu',
         className: '',
         theme: 'light',
         focusable: false },
      _owner: null,
      _store: {} }

[ljharb]

How does Dropdown render the Menu? If it renders it outside of the render tree - like, say it appends to the DOM, or uses the modern Portals API - it's not necessarily something enzyme can handle.

Have you filed an issue with antd to see if they have any thoughts?

[iaravindreddyp]

as far as i can see it is rendering outside of render tree. though i haven't filed any issue with antd

[ljharb]

I’m going to close this then; if it’s using official Portals, then it should just work in React 16, but otherwise, see #252 for why it’s not something enzyme can address.

Please post the link here when you do file the issue!