问题描述
我有一个呈现自定义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 es 的标签不同（目前使用span和 key/click 处理程序实现）。
我想测试点击标签时，图像应该改变。
比方说，用户点击checkbox1标签为“checkbox1”，形象应该从“选择复选框”更改为“复选框未选中”
我在尝试引用具有特定标签的checkbox时遇到问题。
如果我执行getByText("checkbox1") ，它会返回span元素，并且我没有对实际checkbox的引用来断言图像是否已更改。
我现在的解决方法是getAllByRole然后filter(item => item.textContext === "checkbox1")然后queryByAltText 。
有没有更好的方法来测试这个？
1楼
好吧，在我看来，最好的方法是给复选框 div 一个带有标签 var 的 id 道具，然后执行 getElementByID。
但是如果你像你说的那样得到跨度，你总是可以做.parentElement并获得复选框 div。
你也可以使用.closest("div.checkbox");
在 sapn 上，它将寻找最近的带有类复选框的 div。