Question

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

有没有办法测试订单？我们说我有组件按钮，我想同时渲染图标和文字。

当然，向用户提供对齐选项（首先是Icon或者是第一个孩子）是很好的。

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();
  });
});

然后你可以为＆＃34;左＆＃34;创建另一个测试。对齐。

@ pshoukry的酶版本答案。

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中元素顺序的方法

2 个答案: