12

次の React コンポーネントがあり、TestUtils を使用して選択ブロック内の selectElements の 1 つを選択したいと考えています。それ、どうやったら出来るの？

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

私はすでにこのようにしてみました：

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

しかし、うまくいきません。

4

1 に答える 1

13

問題は、Simulate.change が select の onChange (存在しない) のみを呼び出すことです。onChange ハンドラーでその変更を行わない限り、select の値が実際に変更されるとは思いません。

onChange よりも refs を使用することに固執する場合は、次の行を変更します。

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

これに：

selectComponent.getDOMNode().value = 'type_a';
于 2014-11-06T16:26:26.860 に答える