我能够使用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.
目前无法使用ReactTestUtils直接模拟mouseenter/mouseleave; 看到这个公开的问题:
https://github.com/facebook/react/issues/1297
作为现在的解决方法,您可以使用SimulateNative.mouseOver
和SimulateNative.mouseOut
(确保relatedTarget
在每个上都适当地指定)并且它们将一起导致React触发onMouseEnter和onMouseLeave事件.