React Testing Library测试单选框报错：未找到标签关联的表单控件

我在用React Testing Library测试表单中的多个单选输入框，由于多数单选框的标签都是yes/no，不仅没法用findByLabelText区分不同组的选项，还遇到了如下错误：

Found a label with the text of: yes, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.

失败的测试用例 #

test('Sealing Properly radio input should exist, be unchecked, and be clickable', async () => {
    render(
        <Component />
    );
    const sealingProperlyRadioGroup = await screen.findByTestId('sealingProperly');
    const sealingProperlyRadio = await within(sealingProperlyRadioGroup).findByLabelText('yes');
    expect(sealingProperlyRadio).toBeInTheDocument();
    expect(sealingProperlyRadio).not.toBeChecked();
    fireEvent.click(sealingProperlyRadio)
    expect(sealingProperlyRadio).toBeChecked();
});

报错时的HTML结构 #

<div
    class="radioGroup mb-3"
    data-testid="sealingProperly"
>
    <label
        class="radio"
        for="sealingProperlyYes"
    >
        <input
            id="sealingProperlyYes"
            name="sealingProperly"
            required=""
            type="radio"
            value="yes"
        />
        Yes
    </label>
    <label
        class="radio ms-5"
        for="sealingProperlyNo"
    >
        <input
            id="sealingProperlyNo"
            name="sealingProperly"
            required=""
            type="radio"
            value="no"
        />
        No
    </label>
</div>

解决方案 #

1. 修正大小写匹配问题（直接用findByLabelText） #

从HTML里能看到，标签文本是Yes（大写开头），但测试代码里用的是小写yes，这是导致findByLabelText找不到关联输入框的核心原因。修改成精确匹配的文本即可：

const sealingProperlyRadio = await within(sealingProperlyRadioGroup).findByLabelText('Yes');

2. 通过角色+属性筛选（更可靠的方式） #

如果不想依赖标签文本，直接通过单选框的role和属性筛选，能避免重复文本的问题：

test('Sealing Properly radio input should exist, be unchecked, and be clickable', async () => {
    render(<Component />);
    // 通过role和name属性+value筛选
    const yesRadio = screen.getByRole('radio', {
        name: 'sealingProperly',
        value: 'yes'
    });

    expect(yesRadio).toBeInTheDocument();
    expect(yesRadio).not.toBeChecked();
    fireEvent.click(yesRadio);
    expect(yesRadio).toBeChecked();
});

3. 父组内遍历单选框 #

先拿到分组容器，再获取组内所有单选框，通过value筛选目标选项：

test('Sealing Properly radio input should exist, be unchecked, and be clickable', async () => {
    render(<Component />);
    const group = await screen.findByTestId('sealingProperly');
    const allRadios = within(group).getAllByRole('radio');
    const yesRadio = allRadios.find(radio => radio.value === 'yes');

    expect(yesRadio).toBeInTheDocument();
    expect(yesRadio).not.toBeChecked();
    fireEvent.click(yesRadio);
    expect(yesRadio).toBeChecked();
});

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