如何使用React Testing Library获取name为source的checkbox类型input元素

getByRole查询失效的原因 #

Testing Library 中 getByRole 的 name 选项匹配的是元素的可访问名称（即屏幕阅读器识别的元素名称，通常来自关联的label文本、aria-label属性值等），和HTML原生的name属性完全是两个不同的属性，所以你传入source作为name参数查询不到目标元素。

可用的获取方案 #

方案1：使用getByName方法（最适配需求）

DOM Testing Library 及其上层封装（React Testing Library、Vue Testing Library等）都提供了专门匹配HTML原生name属性的getByName方法，直接使用即可：

const checkbox = screen.getByName('source');
userEvent.click(checkbox);

该方法默认会在找不到元素时抛出明确的测试错误，不需要额外做非空判断，符合测试库的设计逻辑。

方案2：修复原生querySelector的类型报错

你遇到的报错是TypeScript的类型校验提示：document.querySelector在匹配不到元素时会返回null，而userEvent.click不允许接收null类型的入参。
如果你确定元素一定存在，可以用非空断言跳过类型校验：

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

也可以直接做类型强制转换：

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

方案3：调整HTML后用getByRole查询（符合可访问性规范）

如果希望遵循可访问性测试的最佳实践，可以给label补充文本内容（可以用视觉隐藏类只给屏幕阅读器识别），之后就可以用getByRole查询：
修改后的HTML：

<label class="switch" value="true">
    <span class="visually-hidden">来源选择</span>
    <input name="source" type="checkbox"/>
</label>

查询代码：

const checkbox = screen.getByRole('checkbox', { name: '来源选择' });
userEvent.click(checkbox);

内容的提问来源于stack exchange，提问作者stackuser