反应TestUtils，输入文本框不工作

Question

我正在使用React.js和Jasmine为文本输入元素编写单元测试。 我试图简单地输入输入React.TestUtils并没有运气。 测试它的目的是限制可以在文本框中放置的字符数。 在应用程序内部进行测试时，文本框将以正确的限制退出接受字符。

文字// TextInput.js

 var React = require('react');

        var TextInput = React.createClass({
          handleChange: function(event) {
event.target.value]);
              if(event.target.value.length > 100){
                  value = event.target.value.substring(0,100);
                  return;
              }
            console.log("called");
            this.props.update(event.target.name, event.target.value.substring(0,100));
          },
          focus: function(event) {
            //console.log("Focusing on " + event.target.name);
            if(event.target.value === this.props.defaultValue)
              event.target.value = "";
          },
          blur: function(event) {
            //console.log("Blurring " + event.target.name);
            if(event.target.value === "")
              event.target.value = this.props.defaultValue;
          },
          render: function() {
            return <input type="text" name={this.props.name}
                onChange={this.handleChange}
                value={this.props.value}
                className={this.props.className}
                title={this.props.title}

          }
        });

        module.exports = TextInput;

测试

describe('TextInput', function() {
    //..requires 
    var maxString="";
    var nums = "0123456789";
    var TestUtils = React.addons.TestUtils;

  it('should only allow 100 characters in the title text', function() {

    var title = DataProperties.TitleTextInput;

    for(var i = 0; i < 10; i++){
        maxString+=nums;
    }
      var text= TestUtils.renderIntoDocument(<TextInput id="txtTitleText" name="titleText"
          defaultValue="Default Title"
          placeholder="Enter a chart title"
          value=""
          className="form-input input-slim title_txt pre-active"
          title="Chart Title" />);
        console.log(text);
      TestUtils.Simulate.change(text, {target: {value: 'Hello, world'}});

  });
});

如果我在SimulateChange之后检查文本，则会发现该值不是Hello world

Answer 1

我也遇到了这个。 TestUtils.Simulate.change实际上不会更改<input/>的value 。 它只是调度一个事件。 所以Simulate仅用于测试事件处理程序。

如果您实际上想更改<input>的值，则需要这样设置：

var textInput = TestUtils.findRenderedDOMComponentWithTag(text, 'input');
textInput.getDOMNode().value = 'Hello, world';