如何以及在何处向此代码添加 testid 道具答案

【问题标题】：How and where can I add testid props to this code如何以及在何处向此代码添加 testid 道具
【发布时间】：2021-10-21 16:36:30
【问题描述】：

如何添加 test-id 属性以启用对名称行、内容聚合和内容标题的测试。

我正在使用反应。我想为所有导航链接添加 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> ```

【问题讨论】：

在将navItems 数组映射到JSX 并返回Link 组件时可以不指定prop 吗？你试过什么？什么不工作？

标签： javascript reactjs typescript unit-testing

【解决方案1】：

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

Use data attributes

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

【讨论】：