React中测试元素顺序的方法

Question

只想使用 Jest 和 Enzyme 为我的 React 组件实施单元测试。

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

当然最好向用户提供对齐选项（图标优先或儿童优先）。

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 和 Enzyme 测试 iconAlign 道具？

Answer 1

您可以使用浅层渲染并比较输出。我不熟悉 Jest 语法，所以我的示例的那一面可能不正确（我很快参考了他们的网站）：

import { shallow } from 'enzyme';

describe(`Button`, () => {
  it(`should render the icon on the right`, () => {
    const children = <div>foo</div>;
    const actual = shallow(
      <Button iconAlign="right" children={children} />
    );
    const expected = (
      <button><span>{children} <Icon type='search' /></span></button>
    );
    expect(actual.matchesElement(expected)).toBeTruthy();
  });
});

然后您可以为 "left" 对齐创建另一个测试。

@pshukry 答案的酶版本。

describe(`Button`, () => {
  it(`should render icon on the right`, () => {
    const wrapper = shallow(
      <Button iconAlign="right">
        <div>foo</div>
      </Button>
    );
    const iconIsOnRight = wrapper.find('span').childAt(1).is(Icon);
    expect(iconIsOnRight).toBeTruthy();
  });
});

作为参考，这里是酶浅渲染API文档：https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md

Answer 2

检查组件类型

先检查图标

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

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

React中测试元素顺序的方法

Way to test the order of elements in React

reactjs

jestjs

enzyme