Библиотека тестирования реакции — не удается найти элемент привязки по роли

#reactjs #react-testing-library

Вопрос:

У меня есть следующий код:

     <div className="button">
      <a href={SOME_URL}>
      ...
      ...
      </a>
    </div>
 

И в моем тесте, если я попытаюсь сделать:

 const link = screen.getByRole('link');
 

Я получаю следующую ошибку:

 TestingLibraryElementError: Unable to find an accessible element with the role "link"
 

Бегу screen.debug() , я получаю следующее:

           <div
            class="button"
          >
            <a>
 

Так почему же он не может его найти?

Ответ №1:

A[href] имеет роль ссылки по умолчанию…

Источник

Вам нужно будет добавить href в <a> .

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

1. У него есть href , как я упоминал в фрагменте кода, я не уверен, почему он не появляется при печати screen.debug() ?

2. Хм, можете ли вы создать эту проблему с помощью простого компонента, который отображает a <a href="https://google.com">link</a> , чтобы гарантировать, что screen.debug() вы получите тот же результат без href него ?

3. Да, это работает с простой строкой — есть ли причина, по которой она не будет отображаться, если я использую переменную JS, как в моем фрагменте кода?

4. Это undefined … очень странно.. не уверен, что у вас есть какие-либо предложения относительно того, почему это будет неопределенно, но я приму этот ответ в том виде, в каком был дан ответ на первоначальный вопрос.

5. Хорошо, я понял это — поскольку я использовал jest и SOME_URL экспортировал строковое значение из другого файла, мне пришлось издеваться над ним в своем тестовом файле..