时间戳

首页 > 解决方案 > React Jest 如何测试跨度是否包含来自挂载快照的某些文本？

reactjs - React Jest 如何测试跨度是否包含来自挂载快照的某些文本？

问题描述

我正在测试一个没有任何 id 以便我能够从 Jest 中选择的组件，我安装的组件快照将类似于

<div id='divHeader'>
    <h2
      className=""
      style={Object {}}
    >
      <span
        className=""
        style={Object {}}
      >
        This is an English text
      </span>
    </h2>
</div>

那么有什么方法可以让我验证快照中的跨度内的文本是否包含世界English，例如

widget = mount(<MyComponent {...defaultProp} />);
// widget.find('span').text.contains('English')   
// widget.find('[id="divHeader"]').h2.span.text.contains('English')

我在find这里遇到了一些麻烦，我知道它可以通过 id 找到元素，但不幸的是我无法为我的 span 分配任何 id，即使我可以通过 id 找到我的 div，我也无法选择它的子元素，如 div-> h2->跨度...

标签： reactjsjestjsenzymereact-test-renderer

解决方案

find 返回一个ReactWrapper类似的挂载，因此您可以链接 find 调用。

例如，像这样的东西。

widget.find('[id="divHeader"]').find('h2').find('span').text().contains('English')

推荐阅读