如何在React-testing-library中按span查找输入？

Question

如何从 span 元素中找到 by text 的复选框？我无法修改我的 HTML。我希望在输入元素上测试 fireEvent。

`

<label>
   <div>
      <input type="checkbox" class="checkbox-extra-style">
      <span> SPAN A</span>
   </div>
</label>
<label>
   <div>
      <input type="checkbox" class="checkbox-extra-style">
      <span> SPAN B</span>
   </div>
</label>

`` ....

非常感谢您的帮助。

Answer 1

Span 没有 aria 角色，因此您有几个选择：

1. 修改 html，将 aria-role 添加到 span，然后使用 screen.getByRole
2. 让 HTML 保持原样，并按照优先级列表使用 screen.getByText("SPAN A")