如何使用酶 Shallow 断言嵌套元素中的文本？答案

【问题标题】：How to assert for text in a nested element with enzyme Shallow?如何使用酶 Shallow 断言嵌套元素中的文本？
【发布时间】：2020-12-16 17:39:39
【问题描述】：

我有一个渲染另一个组件的组件，我正在用这样的浅层创建它：

const component = shallow(<ABC {...props} />);

当我运行component.html() - 我可以看到这个输出

    <div class="abc">
      <div data-attribute1="hi" class="dynamically generated">
        First
      </div>
      <div data-attribute2="bye" class="dynamically generated">
        second
      </div>
    </div>

我想写一个断言来检查文本“First”是否存在。

我尝试了各种组合，例如find(ABC2).find('[attribute1="hi"]') ABC2 是在 ABC 内部呈现的组件，它在 html 输出中正确显示，但我似乎无法弄清楚如何断言文本。

【问题讨论】：

标签： javascript reactjs testing jestjs enzyme

【解决方案1】：

你可以使用这个断言：

  expect(component.find("div.random1").text()).toBe(
    "First"
  );

这将查找所有具有类 random1 的 div 标签，并尝试断言它包含的文本是首先，这假设您只有 1 个具有该类的 div。

您可以在酶 API 中查看更多信息：

https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/text.html

【讨论】：

对不起，我会更新问题，类是动态生成的，所以我不能依赖它们的值。
此外，第一个发现必须在“ABC2”上，这是在“ABC”内部调用的组件，并返回 div...据我所知。
那么你怎么能保证第一个ins会是第一个呢？因为 attribute1 不是 div 标签的有效 html 属性。我还认为您可以测试第二个 div 是否应该具有第一个文本，因此您可以将查询更改为 component.find("div").at(1).text() 如果您知道的话假设第一个 div 是所有选项的包装器，则第二个 div 始终是第一个。
我将更新属性值，使其有效。我认为第一个发现需要在 ABC2 组件上，不是吗？这就是 ABC 组件返回的内容
如果 ABC2 组件包含第一个、第二个 div 等等，它应该在该测试中，请记住，浅仅测试您要浅化的组件，因此它们的子组件不会被显示，只是