SVG图标已渲染但getByRole('graphics-document')测试失败，求原因与修复方案

原因 #

SVG元素默认不会被自动赋予graphics-document角色，且如果SVG没有提供可访问标识（如aria-label、aria-labelledby）或明确声明ARIA角色，它不会被纳入无障碍树中。Testing Library的getByRole查询仅针对无障碍树内的元素，因此即便DOM中存在SVG，也无法通过该查询找到。

另外，graphics-document角色多用于指代完整的图形文档（如独立SVG文件），浏览器不会默认给内联SVG分配该角色，需手动声明。

修复方案 #

方案1：显式声明graphics-document角色并添加可访问名称 #

若SVG具备语义（非纯装饰），可手动指定角色并添加可访问名称，让其被无障碍树识别：

render(
    <div>
        <svg height="100" width="100" role="graphics-document" aria-label="红色圆形图标">
            <circle cx="10" cy="10" r="10" stroke="black" fill="red" />
        </svg>
    </div>
);

expect(screen.getByRole('graphics-document', { name: '红色圆形图标' })).toBeInTheDocument();

方案2：使用img角色（图标场景推荐） #

对于图标类SVG，role="img"是更符合无障碍规范的通用选择：

render(
    <div>
        <svg height="100" width="100" role="img" aria-label="红色圆形图标">
            <circle cx="10" cy="10" r="10" stroke="black" fill="red" />
        </svg>
    </div>
);

expect(screen.getByRole('img', { name: '红色圆形图标' })).toBeInTheDocument();

方案3：使用测试ID（仅用于纯存在性验证） #

若仅需确认SVG是否渲染，无需关注无障碍场景，可添加data-testid后用getByTestId查询：

render(
    <div>
        <svg height="100" width="100" data-testid="circle-icon">
            <circle cx="10" cy="10" r="10" stroke="black" fill="red" />
        </svg>
    </div>
);

expect(screen.getByTestId('circle-icon')).toBeInTheDocument();

方案4：直接查询SVG元素（不推荐） #

若不遵循Testing Library以用户视角测试的理念，也可直接用querySelector查询，但该方式不符合测试最佳实践，仅作参考：

render(
    <div>
        <svg height="100" width="100">
            <circle cx="10" cy="10" r="10" stroke="black" fill="red" />
        </svg>
    </div>
);

expect(screen.querySelector('svg')).toBeInTheDocument();

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