使用点符号测试 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)
  });
});

我在运行 jest 时遇到的错误是：

方法“hasClass”旨在在 1 个节点上运行。找到了 0 个。

我知道这是因为标签名称用点分隔，因为如果我用 div 标签替换标签，它就可以工作。我曾尝试分别访问“卡片”和“元”，但在 Google 上找不到任何内容。

谁能告诉我如何在 Jest 和 Enzyme 中测试带有点符号的标签？

Answer 1

通过wrap.find("Card.Meta")，您试图通过displayName 查找不是“Card.Meta”。
改为这样做：

import Card from "..."

...

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