How and where can I add testid props to this code

Question

How can i add the test-id props to enable testing for Name Row, cONTENT Aggregrate and Content Title.

I am using react. I want to add test-id attribute for all Nav links. How and where can I add this? I have tried adding it in the const Array

Array<NavLists> = [

 

{ id: 'nav__name-row, title: 'Name

Row', link: getNameUrl() },

  { id:

'nav__content-aggregate, title: 'Content Aggregrate, link: getDAggregrateUrl()

},

  { id:

'nav__content-title', title: 'Content Title', link: getTitleUrl() },

  { id: 'nav__content-index',

title: 'Content Index, link: getIndexUrl() }

]



Const HorizontalNav: React.FC<Props> = (props) => {



Const {location} = props

Const {pathname} = location

Const founditem = navLists.find(navItem) => pathname.include(navItem.link)) || navLists[0]



Return (

<div>

<Tabs selectedTabiD = {founditem.id)>

{navItems.map((navitem) => (

<Tab key = {navItem.id} id = {navitem.id}>

{navitem.id === founditem.id ? <span>{navItem.title}</span> : <Link to {navItem.link}>{navitem.title}</link>}

</tab> ```

Answer 1

If you need to attach a data-* attribute for testing then the syntax is likely data-testid.

Use data attributes

<Link
  data-testid={navItem.id}
  to={navItem.link}
>
  {navitem.title}
</link>