ReactJS Änderungswert/Komponententest simulieren

Question

Ich versuche, einen Test einer Wertänderung für meine InputText-Komponente zu simulieren. Ich weiß wirklich nicht, wie ich das machen soll. Ich weiß nur, dass ich die ref und die onChange Methode verwenden muss. Aber wenn ich eine Referenz auf meinen Test setzte, bekam ich einen Fehler wie "Sie könnten eine Referenz zu einer Komponente hinzufügen, die nicht innerhalb der Rendermethode einer Komponente erstellt wurde".

Edit = ich ref geben in den Render meiner Input Komponente

Dies ist die Render meiner Input Komponente

 render: function() { 
     console.log('passerender'); 


     var attrs = this.generateAttributes(); 


     var type = this.props.area ? "textarea" : "text"; 

     return (
      <Input 
       className={this.props.menuClassName} 
       type={type} 
       {...attrs} 
       {...this.props.evts} 
       className={this.props.menuClassName} 
       onChange = {this.handleChange} 
       onBlur = {this.handleBlur} 
       value={this.state.value} 
       ref = "InputField" 
       hasFeedback 
      /> 
     ); 
    } 
}); 

Dies ist meine Testseite meiner Input Komponente:

 var React = require('react'), 
    InputText = require('../resources/assets/js/testcomponents/InputText.js').InputTextEditable, 
    TestUtils = require('react-addons-test-utils'), 
    ReactDOM = require('react-dom'); 


describe('InputText', function() { 

    var InputElement = TestUtils.renderIntoDocument(
     <InputText 
      area={false} 
      //evts={{onChange: handleChange}} 
      attributes={{ 
           label:'Test Input Isole', 
           name:'InputTextArea', 
           value: '', 
           wrapperClassName: 'col-md-4', 
           labelClassName: 'col-md-2', 
           groupClassName: 'row' 
           }} 
      //ref="InputField" 
      editable={true}/>); 

    var DomElement = ReactDOM.findDOMNode(InputElement); 
    var inputV = ReactDOM.findDOMNode(InputElement.refs.InputField); 

    var input = DomElement.getElementsByTagName('input')[0]; 
    var inputspan = DomElement.getElementsByTagName('span')[1]; 


    it('updates input value on key press', function() { 
     inputV.value = 'test'; 
     expect(input.getAttribute('value')).toEqual(''); 
     TestUtils.Simulate.change(inputV); 
     TestUtils.Simulate.keyDown(inputV, {key: "Entrer", keyCode: 13, which: 13}); 
     expect(input.getAttribute('value')).toEqual('test'); 
    }); 

Answer 1

können Sie verwenden findRenderedComponentWithType oder findRenderedDOMComponentWithTag

Sie müssen findDOMNode nicht explizit aufrufen, weil TestUtils dies für Sie getan hat.

var InputElement = TestUtils.renderIntoDocument(
    <InputText {...yourProps}/> 
); 

// Assuming there is only one <input /> DOM element in your Input 
var input = TestUtils.findRenderedComponentWithType(InputElement, Input) 

// or you can just find <input /> directly 
var input = TestUtils.findRenderedDOMComponentWithTag(InputElement, 'input'); 

TestUtils.Simulate.change(input); 
TestUtils.Simulate.keyDown(input, {key: "Entrer", keyCode: 13, which: 13}); 

Answer 2

Ok Ich finde das Problem des Syntaxfehlers. Es war auf meinem html5validator auf meinem Input Mixin. Ich habe versucht/fangen, um das zu lösen:

var html5Validity = true; 
     if (DOM !== undefined) { 
      try { 
       html5Validity = $(DOM).find(':invalid').length == 0; 
       console.log('passe'); 
      } catch (e) { 
       console.log('html5Validity = [catch]'); 
       html5Validity = true; 
      } 
     } 
     attrs = _.extend({'data-valid': validation.isValid && html5Validity}, attrs); 

Jetzt ist es OK! Vielen Dank ! :)