无法模拟点击菜单Antd与jest和酶。

Question

我正在尝试模拟click 在菜单组件上。Antd v4.3.1

组件。

import React from 'react'
import PropTypes from 'prop-types'
import { Menu } from 'antd'

import { SMALL_ICONS, PATHS } from '../../constants'

export const LeftMenu = ({ currentRoute, onMenuClick }) => {
  return (
    <Menu
      mode='inline'
      selectedKeys={[currentRoute]}
      onClick={onMenuClick}
      data-test='component-left-menu'
    >
      {Object.keys(PATHS).map((key, index) => (
        <Menu.Item
          key={key}
          icon={SMALL_ICONS[key]}
          data-test={`left-menu-item-${key}`}
        >
          {PATHS[key]}
        </Menu.Item>
      ))}
    </Menu>
  )
}

LeftMenu.propTypes = {
  currentRoute: PropTypes.string.isRequired,
  onMenuClick: PropTypes.func.isRequired,
}

测试：

import React from 'react'
import { shallow } from 'enzyme'

import { LeftMenu } from '../LeftMenu'

const onMenuClickMock = jest.fn()

const defaultProps = {
  currentRoute: '',
  onMenuClick: onMenuClickMock,
}

const setup = props => {
  const setupProps = { ...defaultProps, ...props }
  return shallow(<LeftMenu {...setupProps} />)
}

describe('click on first menu item', () => {
  const wrapper = setup()
  wrapper.simulate('click', { key: 'home' })
  expect(onMenuClickMock.mock.calls.count).toBe(1)
})

结果：

Expected: 1
Received: undefined

我应该如何模拟点击Menu，而不是点击Menu。Menu.Item ?

当我把处理程序放在 Menu.Item 工作正常。我需要在Menu中精确地处理。

Answer 1

尝试使用 wrapper.find() 针对 <Menu> 组成部分，特别是。

import React from 'react';
import { shallow } from 'enzyme'; // use mount instead

import { LeftMenu } from '../LeftMenu';
import { Menu } from 'antd'; // note we're importing the Menu component

const onMenuClickMock = jest.fn();

const defaultProps = {
  currentRoute: '',
  onMenuClick: onMenuClickMock,
};

const setup = props => {
  const setupProps = { ...defaultProps, ...props };
  return shallow(<LeftMenu {...setupProps} />);
};

describe('click on first menu item', () => {
  const wrapper = setup();
  const menu = wrapper.find(Menu); // Find component instance in wrapper
  menu.simulate('click', { key: 'home' }); // simulate click on menu
  expect(onMenuClickMock).toHaveBeenCalled();
});

对了 请 养成用分号结束语句的习惯。从技术上讲，这并不是JavaScript标准所 "要求 "的，但专业的开发人员普遍采用了这种做法，并且使代码更容易阅读，万一出现错别字，写起来也更安全。