时间戳

首页 > 解决方案 > Enzyme - 在作为道具传递的元素中触发事件

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

问题描述

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

我需要在 prop 组件中测试一个事件处理程序，但在使用 Enzyme 时遇到了问题。我尝试过模拟事件并手动单击（）。我使用 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()。

标签： javascriptreactjsjestjsenzyme

解决方案

当您访问时，dropdown.prop您将获得 React元素（就像 JSX 所代表的数据结构一样）。这些不是在页面上呈现和安装的组件。这就是为什么模拟 click DOM 事件之类的东西不起作用的原因。

你需要做的是找到onClickpropmenuItem并调用它：

menuItem.props.onClick()

推荐阅读