酶 - 在作为道具传递的元素中激发事件

Question

我正在使用酶来测试一个 React 组件，该组件将另一个组件作为 prop 传递。我需要在 prop 组件中测试事件处理程序，但在使用 Enzyme 时遇到问题。我尝试模拟事件并手动.click（）'ing。我正在使用Jest作为主要的测试框架。此外，无法找到道具组件。wrapper.find('MenuItem')主组件.js<MainComponent>  <Dropdown    overlay={      <Menu >        {menuItems.map((item, i) => <Menu.Item key={i} onClick={() => handleClick(item)}>{item}</Menu.Item>)}        <Menu.Divider />        <Menu.Item/>      </Menu>}  /></MainComponent>MainComponent.test.jsconst mockHandleClick = jest.fn()const wrapper = shallow(<MainComponent handleClick={mockHandleClick} menuItems=['tag'] />)const dropdown = wrapper.find('Dropdown')const menu = dropdown.prop('overlay')const menuItem = menu.props.children[0][0] // the map is stored as an array in childrenexpect(menuItem.props.children).toEqual('tag') // passes// None of these work// menuItem.simulate('click')// menuItem.click()// menuItem.dispatchEvent('click')expect(mockHandleClick).toHaveBeenCalledTimes(1)mockHandleClick.mockClear()我想我可能对检索到的元素和通过 检索的元素之间的区别有根本的误解。.find().props()

Answer 1

当你访问时，你会得到React元素（像JSX表示的数据结构一样思考）。这些不是在页面上呈现和装载的组件。这就是为什么像模拟点击DOM事件这样的事情不起作用的原因。dropdown.prop

相反，您要做的是找到道具并称之为：onClickmenuItem

menuItem.props.onClick()