Question

我能够使用React测试工具模拟点击事件，但我无法模拟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事件。

Answer 2

现在这个答案有点不同，因为自v0.11.1起，mouseOver事件在React中起作用 - 请参阅here

这意味着您现在可以使用

ReactTestUtils.Simulate.mouseEnter(events.refs.button.getDOMNode());

就像你在你的例子中尝试过一样。

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

2 个答案: