React组件按钮disabled属性测试失败求助（基于TestUtils）

咱们先把问题的核心点揪出来：你的组件里把函数类型的props.disabled直接赋值给了按钮的disabled属性，但按钮的disabled接受的是布尔值，不是函数。

在React里，按钮的disabled属性有个特性：只要传入的不是false、null或undefined，不管是什么值（比如字符串、对象、函数），都会被判定为true，按钮就会处于禁用状态。所以第二个测试里，你传了一个返回false的函数，但因为你直接把函数本身传给了disabled，按钮依然会被禁用，这就是测试失败的根源。

解决方案分两种情况，看你的实际需求： #

情况1：props.disabled确实是一个返回布尔值的函数 #

如果你的设计就是让父组件传一个函数来动态判断按钮是否禁用，那你需要在组件里调用这个函数，把返回的布尔值传给按钮的disabled：

修正后的组件代码：

const propTypes = { disabled: PropTypes.func.isRequired };
class MyComponent extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <span>
        {/* 调用函数，拿到返回的布尔值再传给disabled */}
        <button id="my-button" type="submit" disabled={this.props.disabled()}>
          MyButton
        </button>
      </span>
    );
  }
}
MyComponent.propTypes = propTypes;
export default MyComponent;

你的测试代码不需要修改，这样两个测试用例就能正常通过——第一个调用函数返回true，按钮禁用；第二个返回false，按钮启用。

情况2：props.disabled本来就应该是布尔值 #

如果你的需求是直接传布尔值来控制按钮禁用状态，那需要先修正propTypes的定义，再调整测试代码：

修正后的组件代码：

// 把func类型改成bool类型
const propTypes = { disabled: PropTypes.bool.isRequired };
class MyComponent extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <span>
        <button id="my-button" type="submit" disabled={this.props.disabled}>
          MyButton
        </button>
      </span>
    );
  }
}
MyComponent.propTypes = propTypes;
export default MyComponent;

对应的测试代码也要改成直接传布尔值：

describe('MyComponent', () => {
  it('should render disabled button when props.disabled is true', () => {
    const props = { disabled: true };
    const myComponent = TestUtils.renderIntoDocument(<MyComponent {...props}/>);
    const root = ReactDOM.findDOMNode(myComponent);
    const myButton = root.querySelector('#my-button');
    expect(myButton.disabled).toEqual(true);
  });
  it('should render enabled button when props.disabled is false', () => {
    const props = { disabled: false };
    const myComponent = TestUtils.renderIntoDocument(<MyComponent {...props}/>);
    const root = ReactDOM.findDOMNode(myComponent);
    const myButton = root.querySelector('#my-button');
    expect(myButton.disabled).toEqual(false);
  })
});

这样调整后，两个测试用例也都能正常执行通过。

内容的提问来源于stack exchange，提问作者user