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: [<a href="/link1/">Link 1</a>, <a href="/link2/">Link 2</a> ...]

```

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.