This is the code that I wrote:

import {Dropdown, Menu} from 'antd';
class p 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 p;

This is how my interface currently works:

When I hover over the DropDown the menu will appear and when any of the items are clicked on they get selected and the state variable concept gets updated. How can I test this DropDown? I am not able to access the menu to simulate the 'click' on the menu.

ponent = mount(<p />)
    const dropdown = ponent.find(Dropdown) // this i am able to find 
    const menuInstance = ponent.find(Menu) // this it is returning reactwrapper {length:0}

How do I simulate the onclick on menu? I tried console logging the dropdown.props().overlay and I got:

sdas { '$$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: {} }

This is the code that I wrote:

import {Dropdown, Menu} from 'antd';
class p 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 p;

This is how my interface currently works:

When I hover over the DropDown the menu will appear and when any of the items are clicked on they get selected and the state variable concept gets updated. How can I test this DropDown? I am not able to access the menu to simulate the 'click' on the menu.

ponent = mount(<p />)
    const dropdown = ponent.find(Dropdown) // this i am able to find 
    const menuInstance = ponent.find(Menu) // this it is returning reactwrapper {length:0}

How do I simulate the onclick on menu? I tried console logging the dropdown.props().overlay and I got:

sdas { '$$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: {} }

• javascript
• reactjs
• unit-testing
• jestjs
• enzyme

3 Answers 3

This is how I achieved it:

// Let's assume you already have a ShallowWrapper with some Dropdown's parent.
const dropdown = wrapper.find(Dropdown);
const submenu = shallow(<div>{dropdown.prop('overlay')}</div>);
const submenuItems = submenu.find(Menu.Item);
submenuItems.forEach(item => item.simulate('click'));

To find the Menu ponent:

const menuInstance = shallow(ponent.find('Dropdown').first().props().overlay)

I'm accessing it via wrapper.prop("overlay").props.children[0] hope to see more delicate way.