6

This is the code that I wrote:

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 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.

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 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: {} }

3 Answers 3

4

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'));
3

To find the Menu component:

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

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.