React Testing Library查询单选框报Found multiple elements错误如何解决？

问题根因 #

你使用的模糊正则/to/i为包含匹配规则，只要元素的可访问名称（React Testing Library计算可访问名称时会综合label文本、id、aria-label、title等多个属性）中任意位置出现to字符（不区分大小写）就会被命中。报错显示两个radio都被匹配，说明transferFunds_from对应的元素的可访问名称中也隐含了to子串，大概率是组件自动生成的属性或者父级文本中包含该子串导致误匹配。

解决方案 #

方案1：使用精确正则匹配 #

给正则添加开头^和结尾$限制，仅匹配完整文本等于to的元素，避免命中包含to子串的其他内容：

const toRadio = screen.getByLabelText(/^to$/i);

方案2：使用精确字符串匹配 #

如果确定label文本固定为To，直接传入字符串进行精确匹配，性能更高且不会出现误匹配：

const toRadio = screen.getByLabelText('To');

方案3：通过测试ID查询（兜底方案） #

如果因为组件封装导致文本可能动态变化，可以给目标元素添加专属测试ID，完全避免匹配冲突：
给Radio组件添加属性：

<Radio data-testid="to-radio" />

测试代码查询：

const toRadio = screen.getByTestId('to-radio');

方案4：role查询增加筛选条件 #

如果使用role查询，可以额外指定其他属性缩小匹配范围：

const toRadio = screen.getByRole('radio', {
  name: /to/i,
  id: /_to$/ // 仅匹配id以_to结尾的radio
});

内容的提问来源于stack exchange，提问作者Cristian Flórez