javascript - Hur man testar antd Dropdown med Enzyme
Detta är koden som jag skrev:
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;
Så här fungerar mitt gränssnitt just nu:
När jag hovrar över DropDown visas menyn och när någon av objekten klickas på blir de valda och tillståndsvariabeln uppdateras. Hur kan jag testa denna DropDown? Jag kan inte komma åt menyn för att simulera ett 'klick' på menyn.
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}
Hur simulerar jag onclick på menyn? Jag försökte logga dropdown.props().overlay i konsolen och jag fick:
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: {} }
Svar #1
Så här uppnådde jag det:
// 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'));
Svar #2
För att hitta Menykomponenten:
const menuInstance = shallow(component.find('Dropdown').first().props().overlay)
