React Testing Library返回多个元素时如何select特定元素？

Question

所以我正在尝试 select 使用占位符的元素，如下所示：

fireEvent.focus(screen.getByPlaceholderText('DD/MM/YYYY'));

这给了我一个错误，说它找到了多个具有所述占位符的元素。下面是匹配的元素:

<input
      class="StyledInput"
      hasvalue=""
      label="Date of birth"
      placeholder="DD/MM/YYYY"
      tabindex="0"
      value=""
      variant=""
    />

    <input
      class="StyledInput"
      hasvalue=""
      label="Expiry date"
      placeholder="DD/MM/YYYY"
      tabindex="0"
      value=""
      variant=""
    />

它返回给我两个元素，但我只想 select 第一个。我怎样才能得到那个特定的元素？

Answer 1

你应该使用getAllByPlaceholderText方法，否则会报错：

TestingLibraryElementError: Found multiple elements with the placeholder text of: DD/MM/YYYY

const inputs = screen.getAllByPlaceholderText('DD/MM/YYYY')的return值是一个元素列表，可以通过数组索引获取第一个输入元素-inputs[0]

React Testing Library返回多个元素时如何select特定元素？

How to select a specific element when returned multiple elements in React Testing Library?

reactjs

react-testing-library