Javascript 测试按钮'；s在React中处于禁用状态

我有一个简单的组件，我想用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 TextConfirmButton=React.createClass({
getInitialState:函数（）{
返回{
输入文本：“”，
confirmText:this.props.confirmText，
按钮启用：false，
输入：正确
}
},
handleChange:函数（事件）{
this.setState（{inputText:event.target.value}）；
},
handleConfirm:function（）{
this.props.onConfirmClick（）；
//当用户单击确认按钮时，禁用输入和按钮。
this.setState（{buttonEnabled:false，inputEnabled:false}）；
},
render:function（）{
返回(
删去
)
}
})

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

我试图：

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

var TestUtils=React.addons.TestUtils；
描述（'TextConfirmButton'，函数（）{
它（'启动时确认按钮已禁用'，功能（）{
var onConfirmClick=函数（）{
控制台日志（“确认单击”）；
}
var textConfirmButton=TestUtils.renderIntoDocument(
);
var textConfirmButtonNode=ReactDOM.findDOMNode（textConfirmButton）；
expect（textConfirmButtonNode.disabled）.toEqual（'disabled'）；
});
});

但测试失败，错误为：

textConfirmButtonNode.disabled undefined

。因此，

.disabled

显然是错误的做法

有什么建议吗？

您需要使用，以便能够查询TestUtils生成的DOM

var textConfirmButtonNode = 
TestUtils.findRenderedDOMComponentWithTag(textConfirmButton, 'button');

expect(textConfirmButtonNode.disabled).toEqual(true);

---

textConfirmButtonNode

引用

render（）函数中最外层的
div
。除非它有一个属性
disabled
，否则返回undefined并不奇怪

我猜您正在查找引用实际
按钮的DOM节点

var textConfirmButtonNode = ReactDOM.findDOMNode(textConfirmButton);
var renderedButtonNode = textConfirmButtonNode.childNodes[1];

expect(renderedButtonNode.disabled).toEqual('disabled');

我所能评论的是，如果您有DOMNode，那么
.disabled
是正确的检查方法，您确定
textConfirmButtonNode
是DOMNode吗
console.dir（textConfirmButtonNode）
Ah好的，这很有意义。但是我得到了
错误：预期false等于true。
-看到上面的组件代码，禁用的
不应该是true吗？它一开始应该是禁用的，我在浏览我的网站时从视觉上看到了这一点。我刚刚复制了你上面发布的代码，但我将
toEqual（'disabled'）
更改为
toEqual（true）
，不确定这是否解决了问题。尽管使用此方法，测试按预期通过。我想知道为什么它不能处理
childNodes[1]
返回的任何内容。