next.js
next.js copied to clipboard
Published
20 hours ago •
vercel
vercel
next/link, nextjs 13 - render with fragment and jest getByRole
Verify canary release
- [X] I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: linux
Arch: arm64
Version: #1 SMP PREEMPT Tue Sep 13 07:51:32 UTC 2022
Binaries:
Node: 18.12.0
npm: 8.19.2
Yarn: 1.22.19
pnpm: N/A
Relevant packages:
next: 13.0.0
eslint-config-next: 13.0.0
react: 18.2.0
react-dom: 18.2.0
What browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Describe the Bug
import { render, screen } from '@testing-library/react'
import Link from 'next/link'
it('renders link', async () => {
render(
<Link href="/about">
<>About</>
</Link>,
)
expect(screen.getByRole('link', { name: /about/i })).toBeInTheDocument()
})
failing with:
● renders link
TestingLibraryElementError: Unable to find an accessible element with the role "link" and name `/about/i`
There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
Ignored nodes: comments, script, style
<body>
<div>
About
</div>
</body>
9 | )
10 |
> 11 | expect(screen.getByRole('link', { name: /about/i })).toBeInTheDocument()
| ^
12 | })
13 |
and it works if I remove <>/</>. Not sure if this is the error with nextjs or jest, but got it while migrating to NextJS 13.
The original issue is I do something like: <Link ...>{user.first_name} {user.surname}</Link>
Expected Behavior
Link is rendered correctly even with fragment.
Link to reproduction
n/a
To Reproduce
see code above
