Блог

У меня есть страница, которая отображает список пользовательских checkbox файлов. Каждый из них checkbox выглядит следующим образом.

 <div
  className="checkbox"
  role="checkbox"
  onClick={onClick}
  onKeyPress={onKeyPress}
  aria-checked={getState().checked}
  tabIndex={0}
>
  {getState().checked ? (
    <span className="checkbox__icon checkbox__selected">
      <Icon src="/icons/check-box-selected.svg" alt="checkbox selected" />
    </span>
  ) : (
    <span className="checkbox__icon">
      <Icon src="/icons/check-box-empty.svg" alt="checkbox not selected" />
    </span>
  )}
  <span className="checkbox__label">{label}</span>
</div>
  

Я хотел бы иметь возможность находить конкретный checkbox во время тестирования.
checkbox Они отличаются своими метками (в настоящее время реализованы с использованием span обработчиков клавиш / щелчков).

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

Допустим, пользователь нажал на checkbox1 с надписью «checkbox1», изображение должно измениться с «флажок установлен» на «флажок не установлен»

Я сталкиваюсь с проблемами при попытке получить ссылку на checkbox с определенной меткой.

Если я это сделаю getByText("checkbox1") , он вернет мне span элемент, и у меня нет ссылки на фактический checkbox , чтобы утверждать, изменилось ли изображение.

Мой обходной путь на данный момент — getAllByRole и затем filter(item => item.textContext === "checkbox1") , а затем queryByAltText .

Есть ли лучший подход для тестирования этого?

Что ж, лучшим способом, на мой взгляд, будет присвоить checkbox div идентификатор prop с меткой var и просто выполнить getElementById .

Но если вы получите диапазон, как вы говорите, вы всегда можете сделать .parentElement и получить флажок div.

Вы также можете использовать .closest("div.checkbox"); в sapn, и он будет искать ближайший div с флажком class.