如何使用反应测试库访问复选框类型和名称的输入元素？

Question

我有这样的 HTML 代码：

<label class="switch" value="true">
    <input name="source" type="checkbox"/>
</label>

如何访问名称为 source 的输入？我试过使用 getByRole 和 name 属性，但它会抛出一个错误，指出此输入有 name="".

以下是尝试过但无效的解决方案：

screen.getByRole('checkbox', { name: 'source' });

如何以其他方式访问此输入元素？

我尝试按照提供的解决方案这样做

const elem = document.querySelector(
    `input[name="source"]`);
if (elem) {
    userEvent.click(elem);
}

这有效，但如果我像这样删除 if 语句

const elem = document.querySelector(
    `input[name="source"]`);
userEvent.click(elem);

我得到一个错误：

Argument of type null| element is not assignable to parameter of type 'targetelement'. type null is not assignable to type targetelement

Answer 1

你的

const elem = document.querySelector(
    `input[name="source"]`);
if (elem) {
    userEvent.click(elem);
}

很好，因为这仅查询元素，而 return 未找到任何元素时，通常当您使用 get*/find* 并且未找到任何元素时，rtl 将抛出异常。 https://testing-library.com/docs/react-testing-library/cheatsheet

如果您可以控制 HTML 最好的方法是添加 data-testid 属性并使用 byTestId https://testing-library.com/docs/queries/bytestid

Answer 2

TL;DR: 虽然您可以使用 container.querySelector approach，推荐的惯用方法是使用 RTL 的内置查询。

*ByRole 查询中的 name 选项指的是元素的 可访问名称 ，而不是其 name 属性的值。有关详细信息和参考，请参阅 What is the name option in react-testing-library?。

鉴于 HTML 中的 input 元素没有可访问的名称，访问它的唯一方法就是不在 getByRole 查询中包含任何选项.

screen.getByRole('checkbox');

但是，如果您想使用 name 选项，您首先必须为其添加一个实际可访问的名称。在您的情况下，这可以通过使用现有的 label 元素来完成。

<label class="switch" value="true">
    Source
    <input name="source" type="checkbox"/>
</label>

这将允许您使用 name 选项以您尝试的方式查询 input。

screen.getByRole('checkbox', { name: 'Source' });

Answer 3

试试这个方法！标签将具有 htmlFor 属性，该属性应与 input:checkbox.

的 id 属性相匹配

label 标记开始和结束之间的文本将成为您可用于测试的复选框的 name。

How to access an input element of type checkbox and name using react testing library?