React项目中如何为Nav导航链接添加test-id属性以支持测试

你不需要修改导航配置也可以完成test-id的添加，直接在遍历渲染导航元素的位置统一拼接属性即可，以下是完整修改步骤：

第一步：先修复原代码的语法问题 #

你原有导航配置存在字符串引号未闭合的问题，先修正：

const navLists: 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() }
]

如果需要自定义test-id的值，也可以直接在每个配置项中新增testId字段：

const navLists: Array<NavLists> = [
  { id: 'nav__name-row', title: 'Name Row', link: getNameUrl(), testId: 'name-row-nav' },
  // 其余项同理添加testId即可
]

第二步：在渲染处添加test-id属性 #

直接在map遍历导航项的位置，给对应元素加属性即可，测试属性通用规范用data-testid，和主流测试工具（React Testing Library、Cypress等）的默认查询规则匹配，如果你明确需要用test-id直接替换属性名即可：

const HorizontalNav: React.FC<Props> = (props) => {
  const { location } = props
  const { pathname } = location
  const foundItem = navLists.find(navItem => pathname.includes(navItem.link)) || navLists[0]

  return (
    <div>
      <Tabs selectedTabId={foundItem.id}>
        {navLists.map((navItem) => (
          {/* 给Tab组件添加test-id */}
          <Tab key={navItem.id} id={navItem.id} data-testid={`tab-${navItem.id}`}>
            {navItem.id === foundItem.id ? (
              {/* 给选中态的文本容器添加test-id */}
              <span data-testid={`active-tab-${navItem.id}`}>{navItem.title}</span>
            ) : (
              {/* 给导航链接添加test-id */}
              <Link to={navItem.link} data-testid={`nav-link-${navItem.id}`}>{navItem.title}</Link>
            )}
          </Tab>
        ))}
      </Tabs>
    </div>
  )
}

如果你在配置里加了自定义的testId字段，直接把上面的拼接逻辑换成navItem.testId即可。
你之前修改配置不生效，大概率是原代码存在语法错误（引号未闭合、变量名拼写错误、大小写错误等），修正语法后即可正常读取配置字段。

内容的提问来源于stack exchange，提问作者Didi