我如何以及在哪里可以添加测试道具到这段代码

Question

如何添加test-id道具以启用对Name Row, cONTENT Aggregrate和cONTENT Title的测试?

我正在使用react。我想为所有导航链接添加test-id属性。我如何以及在哪里添加这个?我试过把它添加到const数组

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

如果您需要附加data-*属性进行测试，那么语法可能是data-testid。

使用数据属性

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