使用点符号测试 React 标签

Question

我有这个使用语义 UI 标签的简单反应组件：

  render() {
    return (
      <Card.Meta ref="CardStatusComponent123" className={'float small ' + this.props.align + this.props.statusClassName}>
        {this.props.statusText}
      </Card.Meta>
    );
  }

我已经用 Jest 和 Enzyme 编写了一个测试来测试组件：

describe('CardStatusComponent', () => {
  it('displays prop text', () => {
    const props = {
      statusText: 'Available',
      statusClassName: ' green ',
      align: 'left',
    };
    const wrap = shallow(<CardStatusComponent {...props} />);
    expect(wrap.find("Card.Meta").at(0).hasClass('green')).toEqual(true)
  });
});

我在运行开玩笑时得到的错误是：

Method “hasClass” is meant to be run on 1 node. 0 found instead.

我知道这是因为标签名称用点分隔，因为如果我用 div 标签替换标签，它就可以工作。我已尝试分别访问 "Card" 和 "Meta"，但在 Google.

上找不到任何内容

任何人都可以向我解释如何在 Jest 和 Enzyme 中测试带有点符号的标签吗？

Answer 1

通过 wrap.find("Card.Meta") 你试图通过 displayName 找到不是 "Card.Meta" 的。
改为这样做：

import Card from "..."

...

expect(wrap.find(Card.Meta) ... )

使用点符号测试 React 标签

Test a React tag with dot notation

reactjs

jestjs

enzyme

semantic-ui-react