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

Question

我正在使用酶来测试将另一个组件作为道具传递的React组件。

我需要在prop组件中测试事件处理程序，但是在使用Enzyme时遇到了麻烦。我尝试模拟事件并手动进行.click（）处理。我将Jest用于主要测试框架。

而且wrapper.find('MenuItem')找不到道具组件。

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

const 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 children

expect(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

当您访问dropdown.prop时，您将获得React elements（就像JSX表示的数据结构一样）。这些不是在页面上呈现并安装的components。这就是为什么类似模拟点击DOM事件之类的操作将不起作用的原因。

您要做的是找到onClick的menuItem道具并调用它。