2014-06-10 10 views
8

Ich konnte Click-Ereignisse simulieren Reagieren Test utils, aber ich konnte nicht mouseenter Ereignissekonnte nicht mouseenter-Ereignis mit React-Test Utils simulieren

Ich habe Probenkomponente und testet sie in jsfiddle simulieren, dieses Problem zu zeigen 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(); 
    }); 

}); 

ich konnte nicht herausfinden, was ich mouseenter zu simulieren bin fehlt.

Antwort

11

Gegenwärtig kann mouseenter/mouseleave nicht direkt mit ReactTestUtils simuliert werden; sehen diese offene Frage:

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

Als Abhilfe für jetzt, können Sie SimulateNative.mouseOver und SimulateNative.mouseOut verwenden (achten Sie darauf relatedTarget angemessene Weise auf jeder angeben) und zusammen werden sie verursachen Reagieren Feuer OnMouseEnter und OnMouseLeave Veranstaltungen.

+0

Dank Ben, hat diese Lösung für mich gearbeitet – kiran

2

Diese Antwort ist ein bisschen anders als jetzt das mouseover-Ereignis seit v0.11.1 in Reaktion arbeitet - here

sehen, dass bedeutet, dass Sie jetzt

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

genauso wie Sie in Ihrem Beispiel versucht, verwenden können.