无法使用React Test Utils模拟mouseEnter事件

Question

我能够使用React test utils模拟点击事件,但我无法模拟mouseEnter事件

我添加了示例组件,并在jsfiddle中测试以显示此问题 http://jsfiddle.net/kirana/Uf4e2/2/

var Events = React.createClass({
    getInitialState: function () {
        return {
            event: ''
        };
    },
    clickHandler: function () {
        this.setState({
            event: 'click'
        });
    },
    mouseEnterHandler: function () {
        this.setState({
            event: 'mouseenter'
        });
    },
    render: function () {
        return React.DOM.div(null, React.DOM.button({
            ref: 'button',
            onClick: this.clickHandler,
            onMouseEnter: this.mouseEnterHandler
        }, 'click or mouseenter'), React.DOM.div(null, this.state.event));
    }
});


var ReactTestUtils = React.addons.TestUtils;

describe('Events', function () {
    it('should have click event state', function (done) {
        var events = Events();
        ReactTestUtils.renderIntoDocument(events);
        ReactTestUtils.Simulate.click(events.refs.button.getDOMNode());
        events.state.event.should.equal('click');
        done();
    });

    // This test is failing 
    it('should have mouseenter event state', function (done) {
        var events = Events();
        ReactTestUtils.renderIntoDocument(events);
        ReactTestUtils.Simulate.mouseEnter(events.refs.button.getDOMNode());
        events.state.event.should.equal('mouseenter');
        done();
    });

});

我无法弄清楚我缺少什么来模拟mouseEnter.

Answer 1

目前无法使用ReactTestUtils直接模拟mouseenter/mouseleave; 看到这个公开的问题:

https://github.com/facebook/react/issues/1297

作为现在的解决方法,您可以使用SimulateNative.mouseOver和SimulateNative.mouseOut(确保relatedTarget在每个上都适当地指定)并且它们将一起导致React触发onMouseEnter和onMouseLeave事件.