如何在 React、Jest 和 Enzyme 中查找包含特定值的 div 的计数

Question

我正在寻找使用 React、Jest 和 Enzyme 的解决方案。我是这些技术的新手。

我可以运行一些简单的测试。现在这是我想测试的：

<div className="trow">
            <div className="tcolid" >101</div>
            <div className="tcolname">Joe</div>
            <div className="tcolgender">M</div>
          </div>

          <div className="trow">
            <div className="tcolid" >102</div>
            <div className="tcolname">Abc</div>
            <div className="tcolgender">F</div>
          </div>

          <div className="trow">
            <div className="tcolid" >103</div>
            <div className="tcolname">Xyz</div>
            <div className="tcolgender">F</div>
          </div>
          ...
          ...

我的 React 组件使用来自 REST API 的数据。API 可以返回多条男性和/或女性记录。我的要求是确保在 UI 中只呈现一名男性员工。我已经实现了——这不是问题。

当我使用 Jest 和 Enzyme 编写测试时，我想检查渲染时是否只渲染一个值为“M”的 html 元素。

这是我尝试过的 - Jest / Enzyme 不喜欢它。

expect (wrapper.find("div.tcolgender").text()).toEqual("M").toHaveLength(1);

这是行不通的。我查看了 Enzyme API - 没有找到任何“计数”或类似的方法。注意 - 这是“完整”渲染，而不是“浅”渲染。

Answer 1

您可以编写选择器以将所有divs 与M内容相匹配

const children = wrapper.find('div.tcolgender[children="M"]')

并断言孩子们的长度为一

expect(children).toHaveLength(1);

工作示例