Блог

Главная - Вопросы по программированию - Как найти ввод по span в React-testing-library?

Как найти ввод по span в React-testing-library?

#html #testing #input #react-testing-library

#HTML #тестирование #ввод #react-testing-library

Вопрос:

Как я могу найти флажок для элемента по тексту из span? Я не могу изменить свой HTML. Я хочу протестировать fireEvent на элементе ввода.

`

 <label>
   <div>
      <input type="checkbox" class="checkbox-extra-style">
      <span> SPAN A</span>
   </div>
</label>
<label>
   <div>
      <input type="checkbox" class="checkbox-extra-style">
      <span> SPAN B</span>
   </div>
</label>

`
….

Большое спасибо за любую помощь.

Ответ №1:

У Span нет роли aria, поэтому у вас есть несколько вариантов:

  1. Измените html, добавив aria-роль в span, затем используйте screen.getByRole
  2. Оставьте HTML таким, какой он есть, и после списка приоритетов используйте screen.getByText(«SPAN A»)

Комментарии:

1. Спасибо за советы, Боря!

2. Проголосуйте за правильный порядок решений в соответствии с лучшей практикой RTL

Ответ №2:

Вы должны использовать дополнительные параметры, доступные в getBy... запросах. Например, в этом случае screen.getByRole("checkbox", { name: /span a /i }) . Это позволит выбрать

  1. флажки по роли на странице
  2. отфильтруйте приведенное выше до определенного флажка, с которым связан текст «SPAN A» («SPAN A» будет именем, поскольку span и ввод находятся внутри одной метки).

Для получения дополнительной помощи в поиске правильного запроса для использования для некоторого заданного HTML, testing-library ‘s testing playground — отличный ресурс.

Ответ №3:

попробуйте const spanText = (await findByText('SPAN A')).parentNode.childNodes;