Javascript react测试库getAll，然后筛选以查找元素

我有一个页面，显示自定义

复选框的列表。
每个
复选框
如下所示

<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>


{getState（）。是否选中(
) : (
)}
{label}

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

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

假设用户单击标签为“checkbox1”的
checkbox1
，图像应从“选中复选框”更改为“未选中复选框”

我在尝试引用带有特定标签的
复选框时遇到问题

如果我执行
getByText（“checkbox1”）
，它将返回
span
元素，并且我没有引用实际的
复选框来断言图像是否已更改

我现在的解决方法是
getAllByRole
然后
筛选（item=>item.textContext==“checkbox1”）
然后
querybylettext

有更好的方法来测试这一点吗？
在我看来，最好的方法是给checkbox div一个带有标签var的id prop，然后只做getElementByID

但是，如果您像您所说的那样获得span，您可以始终执行
.parentElement
并获取复选框div

您还可以使用
.nexist（“div.checkbox”），它将通过class复选框查找最近的div。
。parentElement可能会使测试变得脆弱，因为我可以在不为用户更改任何内容的情况下进一步嵌套span。id方法或testid方法可以工作，但这是我最后的选择，因为我不想仅仅为了测试目的而添加一些内容，您可以使用.closest（“div”）；同样，它会给你最接近的div。最接近的div也会很脆弱，用户甚至看不到差异，很容易改变组件的结构。在这种情况下，我不希望我的测试被破坏。