Блог

Я использую библиотеку тестирования react для тестирования выпадающего компонента, чтобы проверить, доступна ли конкретная опция в поиске, и раньше она работала должным образом, используя следующий запрос, который утверждает, что опция выбрана или нет.

 expect(
      screen.getByRole('option', {
        name: 'ZAT',
        selected: false,
      })
    ).toBeInTheDocument();
 

Введена новая функция, при которой я выделяю поисковый запрос в списке параметров, и тесты начали прерываться, поскольку введение mark тега or span (с примененным стилем) создает пустое пространство в тестовом средстве визуализации, из-за которого запрос больше не может найти опцию с точным текстом из-за сгенерированных пробеловв имени доступного элемента (даже если пробелы свернуты в DOM)

Интересно, есть ли у кого-нибудь какие-либо указания относительно того, как я могу это исправить, чтобы тесты работали должным образом.

После некоторого расследования было найдено лучшее решение проблемы, с которой я столкнулся. Вместо того, чтобы полагаться на имя по умолчанию, которое ассоциируется с элементом, мы можем предоставить aria-label атрибут для рассматриваемых элементов как ARIA triumphs all в соответствии с this article — Используя aria

Введение aria-label в элемент, похоже, устраняет проблему, и тесты работают, как ожидалось, без каких-либо изменений.

 <li
  aria-label="ZAT"
  aria-selected="false"
  class="SearchableDropdown__StyledMenuContent-l5l1l4-4 iNSwly"
  id="downshift-1-item-2"
  role="option"
>
   ....
</li>