时间戳

首页 > 解决方案 > 使用点符号测试 React 标签

reactjs - 使用点符号测试 React 标签

问题描述

我有这个使用语义 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 标签替换标签，它就可以工作。我试过分别访问“卡”和“元”，但在谷歌上找不到任何东西。

谁能向我解释如何在 Jest 和 Enzyme 中使用点符号测试标签？

标签： reactjsjestjsenzymesemantic-ui-react

解决方案

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

import Card from "..."

...

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

推荐阅读