React Testing Library : check if multiple elements have href - testing

Question

I'd like to check if all links in a <ul> have a href attribute.
Component (uses Gatsby's <Link>) :
const DropdownMenu = ({ open }) => {
return (
<ul className="dropdown-menu">
{open && (
<>
<li>
<Link to="/link1/">Link 1</Link>
</li>
<li>
<Link to="/link2/">Link 2</Link>
</li>
<li>
<Link to="/link3/">Link 3</Link>
</li>
</>
)}
</ul>
)
}
Rendered HTML :
...
<ul
class="dropdown-menu"
>
<li>
<a
href="/link1/"
>
Link 1
</a>
</li>
<li>
<a
href="/link2/"
>
Link 2
</a>
</li>
<li>
<a
href="/link3/"
>
Link 3
</a>
</li>
</ul>
...
Test :
test('links have href', () => {
render(<DropdownMenu open={true}></DropdownMenu>)
const listLinks = screen.getAllByRole('link')
expect(listLinks).toHaveAttribute('href')
})
Output :
received value must be an HTMLElement or an SVGElement.
Received has type: array
Received has value: [Link 1, Link 2 ...]
Is there a way (like a map or something) to check if all elements have correct href ?
I might be using the wrong approch here.

Answer 1

As the error says, .toHaveAttribute should be called on an HTMLElement, but you called it on listLinks which is an array of HTMLElement (HTMLElement[]).
If you really want to test the href value of each link, you simply need to make your assertions in a loop :
listLinks.forEach((link) => {
expect(link).toHaveAttribute('href', expected);
});
I'm afraid there is no such utility method as a map or something for this use case.
That being said, if there is no condition to set each to prop to the links (like the code you shared here), I think that this test is not necessary.
What you are actually testing here is Gatsby Link set the correct href attribute to the generated link from the to prop that has been passed, but this is theoretically none of your business, Gatsby already makes sure it works properly.
In my humble opinion, what you should test is the logic you define : making sure the links are rendered if open prop is true.
The rest is for extra safety, but probably not necessary.

Answer 2

.forEach in Jest could give false positives, use it.each instead