测试反应 Material-UI IconMenu。 Simulate.click 没有不工作

Question

我正在使用 material-ui 使用 'react-addons-test-utils' 为 React 组件编写测试用例。出于某种原因，我无法让 simulate.click 为 IconMenu 工作，并且不确定我做错了什么。我正在尝试模拟 iconbutton 上的单击，以便我可以遍历弹出窗口并获取菜单项并检查长度，但出于某种原因，我不确定我做错了什么。我还注意到，单击 IconButton 时，在 'Provider' 标记后的 DOM 上附加了一个 'PopoverDefaultAnimation'。谢谢！

这是我的组件，可以很好地渲染

import React, {PropTypes} from 'react'
/** material-ui **/
import IconMenu from 'material-ui/IconMenu'
import IconButton from 'material-ui/IconButton'
import MenuItem from 'material-ui/MenuItem'
import Divider from 'material-ui/Divider'
import Help from 'material-ui/svg-icons/action/help-outline'
import getMuiTheme from 'material-ui/styles/getMuiTheme'


    export default class MndyHelp extends React.Component{
    constructor(props) {
        //console.log('Main: constructor()');
        super(props);
    }

     static childContextTypes = {
        muiTheme: React.PropTypes.object
    }
    getChildContext() {
        return {
            muiTheme: getMuiTheme()
        }
    }

    render(){

    var urlLink = "https://www.google.com";

        return(
            <IconMenu
                iconButtonElement={
                      <IconButton style={ {padding: 0, width: "auto", height: "auto", right: 44, top: 4 } } iconStyle={{ height: 30, width: 30, fill: "#304954"}}><Help/></IconButton>}>
                <MenuItem onTouchTap={() => {window.open(urlLink, '_blank');}} primaryText='Item1'/>
                <MenuItem onTouchTap={() => {window.open(urlLink, '_blank');}} primaryText='Item2'/>
            </IconMenu>
        );
    }
}

这是我的单元测试：

import React from 'react'

import {renderIntoDocument,
    scryRenderedDOMComponentsWithTag,
    scryRenderedComponentsWithType,
    Simulate
} from 'react-addons-test-utils'

import chai from 'chai'
import ReactDOM from 'react-dom'
import IconButton from 'material-ui/IconButton'
import IconMenu from 'material-ui/IconMenu'
import MenuItem from 'material-ui/MenuItem'
import Popover from 'material-ui/Popover';
import Help from 'material-ui/svg-icons/action/help-outline'
var should = chai.should(),
    expect = chai.expect;

import MndyHelp from './MndyHelp.jsx';
describe('<MndyHelp/>', () => {
    //render kndyhelp
    //get the iconbutton
    //get the popover
    //click the icon button

    it('should have 2 menuItems', () => {
        var domElement  = renderIntoDocument(<MndyHelp/>),
            buttons     = scryRenderedComponentsWithType(domElement,IconButton),
            firstButton = ReactDOM.findDOMNode(buttons[0]);
            Simulate.click(firstButton);
            var popOver = scryRenderedComponentsWithType(domElement,Popover);
            var menuItem = scryRenderedComponentsWithType(domElement,MenuItem);
            //make sure popover is open i.e. true
            expect(popOver[0].props.open).to.equal(true);
            //Make sure menu items exist
            expect(menuItem.length).to.not.equal(0);
            expect(menuItem.length).to.equal(2);
    });

});

Answer 1

您无法模拟点击，因为没有可点击的内容。

您有一个 onTouchTap 事件，遗憾的是您不能在该事件上使用 Simulate.click，

事实上，您使用的插件阻止了点击的发生：

When a tap happens, the browser sends a touchstart and touchend, and then 300ms later, a click event. This plugin ignores the click event if it has been immediately preceeded by a touch event (within 750ms of the last touch event).

https://github.com/zilverline/react-tap-event-plugin

测试反应 Material-UI IconMenu。 Simulate.click 没有不工作

Testing Reacts Material-UI IconMenu. Simulate.click not not working

chai

reactjs

material-ui