'How to add Cypress "data-cy" to Next.js Link?

This is how I can add data-cy if Link has an <a>. But what if Link does not have it?

<Link href="/about/">
    <a data-cy="nav-item">About</a>
</Link>

https://imranhsayed.medium.com/using-cypress-with-next-js-for-end-to-end-testing-cypress-nextjs-example-af100609cf16

next.js cypress

Solution 1:^[1]

The <Link> will never actually appear in the Clients DOM.

It is 'just' used to let next.js know that you want to have in-app navigation. If you would use the <a> alone you would get a full page reload every time you click the link. Read more here

Since Cypress is like a user, actually clicking the <a> in the DOM, you don't need to worry about <Link>at all in this scenario.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Laurenz Honauer

'How to add Cypress "data-cy" to Next.js Link?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]