Роли и имена

Что делаем: добавляем тесты на навигацию: она должна быть найдена по роли и имени, а в ней должно быть два пункта.

Роль и имя

У каждого элемента для программ чтения с экрана есть роль («что это») и имя («как называется»). Ссылка — link, кнопка — button, nav — navigation. Имя берётся из текста, подписи или атрибута aria-label.

В запросе getByRole('navigation', { name: 'Основное' }) мы просим именно такой элемент. Если на странице две навигации, имя помогает не перепутать их. Это же имя читает диктор: «навигация Основное».

Искать внутри

Чтобы посчитать ссылки только в навигации, а не на всей странице, используем within: он сужает поиск до одного элемента. Без него тест нашёл бы и логотип в шапке, и ссылку на соцсеть.

Источники

• ARIA in HTML: элемент nav: роль navigation и когда нужно имя.
• Testing Library: ByRole: параметры запроса, в том числе name и level.

Проверьте себя