如何使用 React 测试库选择没有标签的输入表单？答案

【问题标题】：How to select an input form that doesn't have a label with React testing library?如何使用 React 测试库选择没有标签的输入表单？
【发布时间】：2021-10-02 19:50:59
【问题描述】：

在此示例中，我尝试选择第二个输入，将值更改为一些文本，然后触发 enter 事件。我的主要问题是选择输入，因为它没有标签也没有 id

<ul>
  <form>
    <input value="" />
  </form>
  <form>
    <input value="" />
  </form>
</ul>

如果有人能提供帮助，我将不胜感激。

【问题讨论】：

你在使用 React 测试库吗？你能发布一些你到目前为止尝试过的示例测试代码吗？
是的，我正在使用 RTL。所以，我已经能够通过首先选择像这样userEvent.type(screen.getAllByRole('textbox')[0], 'some random comment') 这样的输入然后再次选择输入并触发提交事件fireEvent.submit(screen.getAllByRole('textbox')[0]) 来解决这个问题请记住，我并不精通如何使用RTL，所以我相信可能有更好的方法来实现这一点。
从用户的角度来看，输入旁边没有某种标签是否有原因？还是输入中的占位符？
我使用name 属性为您添加了一个可能的答案。
明白了。我建议在添加 Todo 时动态添加 name 或 id。然后使用 getByRole 或 getByTestId。我为name 方法添加了一个答案，因为我认为它比 id 更好。

标签： javascript reactjs testing react-testing-library

【解决方案1】：

我建议在您的输入字段中添加一个name 属性，因为不管测试如何，这都是您想要做的事情。这样在提交表单时会发送正确的值。

<ul>
  <form>
    <input value="" name="firstName" />
  </form>
  <form>
    <input value="" name="lastName" />
  </form>
</ul>

测试可能是：

getByRole('textbox', {name: /lastName/i})

旁注：您有 2 个表单元素，如果两个输入都与同一个表单相关，它们应该存在于同一个表单标签中。

【讨论】：

【解决方案2】：

    const inputs = document.getElementsByTagName('input');
    console.log(inputs); // inputs[1] is second input

这里是inputs

【讨论】：