在 React 中测试按钮的禁用状态

Testing for a button's disabled state in React

本文关键字：状态 按钮 React 测试      更新时间：2023-09-26

我有一个简单的组件，我想用React和ReactUtils进行测试。

var TextConfirmButton = React.createClass({
  getInitialState: function() {
    return {
      inputText: '',
      confirmText: this.props.confirmText,
      buttonEnabled: false,
      inputEnabled: true
    }
  },
  handleChange: function(event) {
    this.setState({ inputText: event.target.value });
  },
  handleConfirm: function() {
    this.props.onConfirmClick();
    // When user clicks the confirm button, disable both the input and button.
    this.setState({ buttonEnabled: false, inputEnabled: false });
  },
  render: function() {
    return (
      <div>
        <input onChange={this.handleChange} disabled={!this.state.inputEnabled} type='text' ref='text' placeholder={this.state.confirmText} />
        <button onClick={this.handleConfirm} disabled={this.state.inputText !== this.state.confirmText} className='btn btn-danger'>Delete</button>
      </div>
    )
  }
})

有没有办法测试按钮的禁用状态？

我尝试过：

var TestUtils = React.addons.TestUtils;
describe('TextConfirmButton', function () {
  it('starts with confirm button disabled', function () {
    var onConfirmClick = function() {
      console.log("Confirm click");
    }
    var textConfirmButton = TestUtils.renderIntoDocument(
      <TextConfirmButton confirmText="example" onConfirmClick={this.onConfirmClick} />
    );
    var textConfirmButtonNode = ReactDOM.findDOMNode(textConfirmButton);
    expect(textConfirmButtonNode.disabled).toEqual('disabled');
  });
});

但是测试失败，错误：textConfirmButtonNode.disabled undefined .因此，.disabled显然是错误的方法。

有什么建议吗？

您需要使用 TestUtils

#findRenderedDOMComponentWithTag 才能查询 TestUtils 生成的 DOM。

var textConfirmButtonNode = 
TestUtils.findRenderedDOMComponentWithTag(textConfirmButton, 'button');
expect(textConfirmButtonNode.disabled).toEqual(true);

textConfirmButtonNode引用render()函数中最外层的div。 除非它的属性是disabled，否则它返回未定义也就不足为奇了。

我的猜测是，您正在寻找引用实际button的DOM节点。

var textConfirmButtonNode = ReactDOM.findDOMNode(textConfirmButton);
var renderedButtonNode = textConfirmButtonNode.childNodes[1];
expect(renderedButtonNode.disabled).toEqual('disabled');
相关文章：