TestingLibraryElementError： 无法在 Next.js 应用程序中找到具有角色"link"的可访问元素

Question

在Next.js应用程序中，我得到错误

TestingLibraryElementError: Unable to find an accessible element with the role "link" 

执行下面的断言-

expect(screen.getAllByRole("link").length).toEqual(1);

用于在next.js的Link Component中包装的锚标记

<Link href={`/article/${Id}`} >
<a
title={Title}
onClick={() => {
///
}}
>
{Title}
</a>
</Link>

Answer 1

通常我们假设默认的角色是"link"但事实并非如此。

• 带href [href]的锚具有"链接"的作用。

• 不带href的锚标记Link有"generic"的角色。svg https://www.w3.org/TR/html-aria/

在Next.js应用程序中，我们将href传递给Link，而不是传递给。所以没有直接获得href，至少当我们试图使用screen.debug()

查看屏幕日志时它不存在标题

所以我找到的唯一解决方案是在Next.js App

中手动提供角色

<Link href={`/article/${Id}`} >
<a
role="link"
title={Title}
onClick={() => {
///
}}
>
{Title}
</a>
</Link>