React 中测试元素顺序的方法

Question

Jest只是想使用和为我的反应组件实现单元测试 Enzyme。

有没有办法测试订单？假设我有组件Button，我想同时渲染图标和文本。

当然，向用户提供对齐选项（图标优先或子元素优先）是件好事。

按钮.js

class Button extends React.Component {
    constructor() {
        super();
    }
    render() {
        let content;
        const icon = (<Icon type='search' />);
        if (this.props.iconAlign === 'right') {
            content = (<span>{this.props.children} {icon}</span>
        } else {
            content = (<span>{icon} {this.props.children}</span>
        }
        return (
            <button>{content}</button>
        );
    }
}

如何用Jest和EnzymeiconAlign测试道具？

Answer 1

检查组件的类型

首先检查图标

var button = TestUtils.renderIntoDocument(<Button />);

var buttonNode = ReactDOM.findDOMNode(button);
expect(buttonNode.props.children[0].type.name).toEqual("Icon")