How to check a scroll-to button in Cypress?

I have a series of menu items that scroll to different elements on my page.

I’d like to loop through each item and ensure it scrolls to the correct element on the page. To do this I would like to get the href value to use as the target element to scroll to.

The first time works, however I then get an error:

TypeError: Timed out retrying after 4000ms: Cannot read properties of undefined (reading 'toLowerCase')

Which is odd because I am not using that function in my code (I’m guessing it’s within Cypress its self).

Would anyone know the correct way of doing this?

My HTML looks like:

<a class="subnav_item" href="#item-1">Item 1</a>
<a class="subnav_item" href="#item-2">Item 2</a>
<a class="subnav_item" href="#item-3">Item 3</a>

And my Cypress test looks like:

cy.get(".subnav_item").each(($submenuItem) => {
    let targetEl = cy.get($submenuItem).invoke('attr', 'href');
    cy.get($submenuItem).click();
    cy.wait(500);
    cy.get(targetEl).should('be.visible');
});