时间戳

首页 > 解决方案 > 如何在 React、Jest 和 Enzyme 中查找包含特定值的 div 的计数

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

问题描述

我正在寻找使用 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 - 没有找到任何“计数”或类似的方法。注意 - 这是“完整”渲染，而不是“浅”渲染。

标签： javascriptreactjsjestjsenzyme

解决方案

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

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

并断言孩子的长度为一

expect(children).toHaveLength(1);

工作示例

推荐阅读