React 测试按钮属性禁用

Question

我无法为按钮属性 disable 编写正确的测试用例。我使用 react-addons-test-utils 中的 TestUtils。

我有非常简单的组件：

const propTypes = {
    disabled: PropTypes.func.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 equal to true', () => {
        // given
        const props = {
            disabled: () => true
        };

        // when
        const myComponent = TestUtils.renderIntoDocument(<MyComponent {...props}/>);

        // then
        const root = ReactDOM.findDOMNode(myComponent);
        const myButton = root.querySelector('#my-button');
        expect(myButton.disabled).toEqual(true);
    });

    it('should render enebled button when props.disabled returns false', () => {
        // given
        const props = {
            disabled: () => false
        };

        // when
        const myComponent = TestUtils.renderIntoDocument(<MyComponent {...props}/>);

        // then
        const root = ReactDOM.findDOMNode(myComponent);
        const myButton = root.querySelector('#my-button');
        expect(myButton.disabled).toEqual(false);
    })
});

而且这个测试实现不起作用。第一个测试通过，但第二个测试失败。

但是当 propTypes 设置为 disabled: false 而不是 disabled: () => false 时，两个测试都会成功。

问题是为什么测试成功，当函数 disabled 是一个等于 false 的布尔常量值并且当 disabled 是一个 returns [= 的函数时不起作用21=]?

失败测试日志：

预期（收到）.toEqual（预期）

Expected value to equal:
  false
Received:
  true

  at Object.<anonymous> (__tests__/unit/components/create/MyComponent-test.js:90:37)
      at new Promise (<anonymous>)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:118:7)

Answer 1

看起来您正在将函数分配给属性值，而不是函数的 return 值，您可以使用

调用

const props = {
   disabled: function() {
      return false;
    }()
}

否则，您需要在测试时调用您的disabled函数，

expect( myButton.disabled() ).toEqual(false);

React 测试按钮属性禁用

React testing button property disable

reactjs

reactjs-testutils

react-test-renderer

React 测试按钮 属性 禁用

React testing button property disable

reactjs

reactjs-testutils

react-test-renderer

React 测试按钮属性禁用