Wählen Sie Option mit Reagieren TestUtils Simulieren

Question

Ich habe die folgenden React-Komponenten, und ich möchte eines der SelectElements in meinem Select-Block mit TestUtils auswählen. Wie mache ich das?

var selectElements = ["type_a", "type_b"]; 

var SelectElement = React.createClass({ 
    render: function() { 
    return (
     <option value={this.props.type}>{this.props.type}</option> 
    ); 
    } 
}); 

var MyForm = React.createClass({ 
    handleSubmit: function(e) { 
    console.log("submitted"); 
    }, 
    render: function() { 
    var selectElements = this.props.availableTypes.map(function (type) { 
     return (
     <SelectElement key={type} type={type} /> 
     ); 
    }); 
    return (
     <form role="form" onSubmit={this.handleSubmit}> 
     <select ref="type" name="type"> 
      <option value="">-- Choose --</option> 
      {selectElements} 
     </select> 
     <input type="submit" value="Search"/> 
     </form> 
    ); 
    } 
}); 

ich bereits habe versucht, es so zu tun:

var myFormComponent = TestUtils.renderIntoDocument(<MyForm selectElements={selectElements} />); 
var form = TestUtils.findRenderedDOMComponentWithTag(myFormComponent, 'form'); 
var selectComponent = TestUtils.findRenderedDOMComponentWithTag(form, 'select'); 

TestUtils.Simulate.change(selectComponent, { target: { value: 'type_a' } }); 
TestUtils.Simulate.submit(form); 

aber es funktioniert nicht.

Answer 1

Das Problem könnte sein, dass Simulate.change nur die OnChange der Auswahl aufruft (die nicht existiert). Ich glaube nicht, dass dies dazu führen wird, dass sich der Wert des Auswahlelements ändert, es sei denn, Sie verursachen diese Änderung in Ihrem onChange-Handler.

Wenn Sie darauf bestehen, Refs über onChange verwenden, diese Zeile zu ändern:

TestUtils.Simulate.change(selectComponent, { target: { value: 'type_a' } }); 

dazu:

selectComponent.getDOMNode().value = 'type_a';