如何使用 React 测试库获取指定类的第一个元素？

Question

我想访问带有“icon”类的第一个元素。

DOM 看起来是这样的：

<div class="parent">
    <div data-testid="add">
        <div class="info"></div> 
        <div class="action">
            <div class="icon"/> // <== I want to access this 
        </div>
    </div>
</div>
<div class="parent">
    <div data-testid="add">
        <div class="info"></div> 
        <div class="action">
            <div class="icon"/> 
        </div>
    </div>
</div>

如何获得第一个带有“icon”类的div？

我努力了：

const element  = queryAllByTestId('add')[0].querySelector(
    'div'
  )[1];

这使得元素未定义。

Answer 1

获取全部通过

getAllBy*查询返回查询的所有匹配节点的数组，如果没有元素匹配，则抛出错误。

查询全部依据

queryAllBy*查询返回查询的所有匹配节点的数组，[]如果没有元素匹配，则返回空数组 ( )。

查询清单

使用查询变体，以免在未找到匹配项时进行测试，并使用querySelectorAll，因为querySelector仅返回第一个匹配的元素，或 null。

const element = queryAllByTestId("add");
if (element.length) {
  let divs = element[0].querySelectorAll("div");
  // ...get the div node you need
}

您甚至可以指定具有特定类的 div

const element = queryAllByTestId("add");
if (element.length) {
  let divs = element[0].querySelectorAll("div.icon");
  // ...get the div node you need
}