Question

我无法为按钮属性TERMINAL编写正确的测试用例。我使用disable中的TestUtils。

我的组件非常简单：

react-addons-test-utils

我想编写测试，检查按钮是否已使用给定道具禁用或未禁用。测试如下所示：

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;

这种测试实现不起作用。第一次测试通过，但第二次测试失败。

但是当propTypes设置为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); }) });而不是disabled: false时，两个测试都成功。

问题是为什么测试成功，当函数disabled: () => false是一个等于false的布尔常量值，当disabled是一个返回disabled的函数时不起作用？

故障测试日志：

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

false

Answer 1

看起来你正在将函数赋值给属性值，而不是函数的返回值，可以通过使用来调用，

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

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

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

反应测试按钮属性禁用

1 个答案: