无法找到角色为“图形文档”的可访问元素答案

【问题标题】：Unable to find an accessible element with the role "graphics-document"无法找到角色为“图形文档”的可访问元素
【发布时间】：2022-12-07 12:02:43
【问题描述】：

要求：检查 DOM 上是否存在图标。

我写的测试用例：

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

expect(screen.getByRole('graphics-document')).toBeInTheDocument();

[角色列表已在 W3 documentation 中定义，由 Jest documentation 引用。]

错误：

上面的测试用例给出了以下错误：

TestingLibraryElementError: Unable to find an accessible element with the role "graphics-document"

SVG 图标正在 DOM 上呈现，但测试用例失败。为什么以及如何解决这个问题？

【问题讨论】：

标签： reactjs unit-testing testing jestjs react-testing-library

【解决方案1】：

RTL 还不支持它。 aria-query包在v5.1.2中添加了graphics-*角色，见https://github.com/A11yance/aria-query/pull/338。但是dom-testing-libraryv8.19.0（目前最新版本）仍然使用aria-queryv5.0.0，见https://github.com/testing-library/dom-testing-library/blob/v8.19.0/package.json#L65

【讨论】：