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

Question

我有这样的 HTML 代码：

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

如何访问带有名称的输入source？我尝试过使用getByRoleandname属性，但它会抛出一个错误，表明该输入有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);

我收到错误：

null 类型的参数| 元素不可分配给“targetelement”类型的参数。null 类型不可分配给 targetelement 类型

Answer 1

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

name查询中的选项是*ByRole指元素的可访问名称name，而不是其属性的值。请参阅react-testing-library 中的 name 选项是什么？了解详细信息和参考。

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

screen.getByRole('checkbox');

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

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

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

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