使用React Testing Library时，如何检测无标签的表单输入框是否存在

别急，这种场景我太熟了！当没法给输入框加可见的label时，React Testing Library还有好几种实用的方法能帮你定位到目标输入框，我给你列几个常用的方案：

• 借助getByPlaceholderText定位
  如果你的输入框设置了placeholder属性，这是最顺手的方式。比如输入框的placeholder是"请输入姓名"，测试代码可以这么写：

  getByPlaceholderText(/请输入姓名/i)
  

  正则里的/i可以忽略大小写，适配不同的写法场景。

• 用getByRole结合辅助属性
  输入框默认的role是textbox，你可以给输入框加一个不影响UI的属性——比如name或者aria-label（后者是专门给辅助技术用的，完全不会在页面显示），然后结合role来定位：
  组件中的输入框示例（用aria-label）：

  <input type="text" aria-label="用户名" />
  

  对应的测试代码：

  getByRole('textbox', { name: /用户名/i })
  

  如果用name属性的话，组件里写<input type="text" name="username" />，测试代码就改成getByRole('textbox', { name: /username/i })，效果一样。

• 最后一招：getByTestId
  如果上面两种方法都不适用，那就用官方推荐的测试专用标识data-testid——这个属性纯粹是为测试而生，不会对业务逻辑或UI产生任何影响：
  组件中的输入框：

  <input type="text" data-testid="name-input" />
  

  测试代码：

  getByTestId('name-input')
  

小提醒：优先用前两种方法哦，因为它们更贴近用户实际使用产品的逻辑（用户会看placeholder，辅助技术会识别aria-label），getByTestId尽量留到实在没别的办法的时候再用。

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