如何使用React测试库获取带有testid的元素？

Question

嗨，我想使用getByTestId访问类“ icon”的第一个div。

下面是DOM的外观

<div class="parent">
    <div data-testid="add">
        <div class="info"></div> 
        <div class="action">
            <div class="icon"/> //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>

从上面您可以看到，有多个带有testid“ add”的元素，我如何获得第一个add div并使用类图标访问其子div。

我尝试过

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

这使元素不确定。

有人可以帮我这个忙吗？谢谢。

Answer 1

getAllBy

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

queryAllBy

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

Query Cheetsheet

使用查询变量，以便在找不到匹配项时不进行测试，并使用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
}