3

只想使用 Jestand为我的 react 组件实现单元测试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测试道具？

4

2 回答 2

4

检查组件的类型

先检查图标

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

var buttonNode = ReactDOM.findDOMNode(button);
expect(buttonNode.props.children[0].type.name).toEqual("Icon")
于 2016-06-01T07:14:12.740 回答
3

您可以使用浅渲染并比较输出。我不熟悉 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();
  });
});

然后你可以为“左”对齐创建另一个测试。

@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

于 2016-06-01T06:27:50.717 回答