React TestUtils ile Simülasyonu seçin

Question

Aşağıdaki React bileşenlerine sahibim ve TestUtils ile select-blokumdaki selectElements öğelerinden birini seçmek istiyorum. Bunu nasıl yaparım?

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> 
    ); 
    } 
}); 

Zaten böyle yapıyor denedim:

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); 

ama çalışmıyor.

Answer 1

Sorun şu ki Simulate.change yalnızca select's onChange (var olmayan) çağırır. Aslında, onChange işleyicinizde bu değişikliğe neden olmadıkça, seçimin değerinin değişmesine neden olacağını sanmıyorum. Buna

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

: Eğer onChange üzerinde ref kullanmakta ısrar ederse

, bu satırı değiştirin

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