react-testing-library getAll 然后过滤找到一个元素

Question

我有一个呈现自定义checkboxes 列表的页面。 每个checkbox 看起来像这样。

<div
  className="checkbox"
  role="checkbox"
  onClick={onClick}
  onKeyPress={onKeyPress}
  aria-checked={getState().checked}
  tabIndex={0}
>
  {getState().checked ? (
    <span className="checkbox__icon checkbox__selected">
      <Icon src="/icons/check-box-selected.svg" alt="checkbox selected" />
    </span>
  ) : (
    <span className="checkbox__icon">
      <Icon src="/icons/check-box-empty.svg" alt="checkbox not selected" />
    </span>
  )}
  <span className="checkbox__label">{label}</span>
</div>

我希望能够在测试时找到特定的checkbox。 checkboxes 的标签不同（目前使用 span 和键/点击处理程序实现）。

我想测试点击标签时，图像应该改变。

假设用户点击标签为“checkbox1”的checkbox1，图像应该从“复选框选中”变为“复选框未选中”

我在尝试引用具有特定标签的 checkbox 时遇到问题。

如果我执行 getByText("checkbox1") ，它会返回 span 元素，并且我没有引用实际的 checkbox 来断言图像是否已更改。

我现在的解决方法是先getAllByRole，然后是filter(item => item.textContext === "checkbox1")，然后是queryByAltText。

有没有更好的方法来测试这个？

Answer 1

好吧，在我看来，最好的方法是为复选框 div 提供一个带有标签 var 的 id 属性，然后执行 getElementByID。

但是，如果你得到像你说的那样的跨度，你总是可以做.parentElement 并得到复选框 div。

您也可以在 sapn 上使用.closest("div.checkbox");，它会查找最近的带有类复选框的 div。