Question

我有一个页面呈现一个自定义checkbox列表。每个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。 checkbox的标签有所不同（当前使用span和键/单击处理程序实现）。

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

假设用户点击了带有标签“ checkbox1”的checkbox1，则图像应从“选择的复选框”更改为“未选择的复选框” </ p>

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

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

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

是否有更好的方法对此进行测试？

Answer 1

好吧，我认为最好的方法是给复选框div一个ID道具，标签为var，然后执行getElementByID。

但是，如果您按照您说的那样获得跨度，则可以随时执行.parentElement并获得复选框div。

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

react-testing-library getAll，然后过滤以查找元素

1 个答案: