3

我有一个呈现自定义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具有特定标签的 a 时遇到问题。

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

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

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

4

1 回答 1

1

好吧，在我看来，最好的方法是给复选框 div 一个带有标签 var 的 id 道具，然后执行 getElementByID。

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

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

于 2019-03-04T08:26:48.110 回答