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

运行笑话时出现的错误是：

方法“ hasClass”应在1个节点上运行。改为找到0。

我知道这是因为标记名称由点分隔，因为如果我将标记替换为div标记，它将起作用。我尝试过分别访问“卡”和“元”，但在Google上找不到任何内容。

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

Answer 1

通过执行wrap.find("Card.Meta")，您正在尝试通过displayName查找不是“ Card.Meta”的对象。
改为：

import Card from "..."

...

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

使用点表示法测试React标签

1 个答案: