javascript - React 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实际上并没有改变value <input/>的。它只是调度一个事件。所以Simulate仅用于测试您的事件处理程序。

如果您确实想更改 <input> 的值，您需要这样设置:

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