如何使用 Enzyme 测试 antd Dropdown

Question

这是我写的代码：

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;

这是我的界面目前的工作方式：

当我将鼠标悬停在 DropDown 上时，菜单将出现，当单击任何项​​目时，它们会被选中并且状态变量概念会更新。我如何测试这个 DropDown？我无法访问菜单来模拟菜单上的“点击”。

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}

如何模拟 onclick 菜单？我尝试控制台记录 dropdown.props().overlay ，我得到：

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

Answer 1

这就是我实现它的方法：

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