React Testing Library无法找到指定textbox元素，求排查原因

先提个代码里的小问题：input元素的内容不要用nodeValue获取，应该用value属性，或者直接用RTL的断言expect(userInput).toHaveValue('someuser')——不过这不是找不到元素的原因，重点看下面的排查点：

• 确认输入框的可访问角色
  不是所有输入框默认role都是textbox，比如<input type="number"/>的role是spinbutton，如果你的输入框是特殊类型，或者是自定义组件，得检查它的实际role是否为textbox，必要时手动设置role="textbox"。

• 核实可访问名称的正确性
  RTL匹配的是可访问名称，它的来源优先级是：aria-labelledby > aria-label > 关联的<label>标签内容，placeholder不算可访问名称。如果你的输入框只有placeholder是"Username"，那RTL肯定找不到，得补全关联的label或者添加aria-label：

  // 方式1：用label关联
  <label htmlFor="username-input">Username</label>
  <input id="username-input" type="text" />
  
  // 方式2：用aria-label
  <input aria-label="Username" type="text" />
  

• 检查元素是否已渲染完成
  如果输入框是在异步操作（比如接口请求、状态更新）之后才出现的，同步的getByRole会因为元素还没渲染而失败，这时候要换成异步的findByRole，配合async/await：

  const userInput = await screen.findByRole('textbox', { name: /username/i });
  

• 用浏览器工具验证可访问属性
  打开Chrome开发者工具的Elements面板，切换到Accessibility标签，查看目标输入框的Accessible name和Role是否符合预期，这是最直接的验证方法。

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