Я хочу проверить флажок, у которого нет метки. Дело в том, что есть и другие флажки, поэтому я не могу использовать getByRole.
Я пытался использовать data-testid, но, видимо, он не работает.
Как я должен проверить, установлен ли этот флажок (toBeChecked())?
<Checkbox
data-testid = {item?.id}
key = {item?.id}
id = {item?.id.toString()}
color = "secondary"
checked = {item?.checked}
disabled = {hasAll}
onChange = {(e: React.ChangeEvent<HTMLInputElement>) => {
if (item) {
item.checked = e.target.checked;
setFinalData(updateItemInArray(finalData, {
item,
index,
}));
}
}}
/>
Поскольку я использую его внутри таблицы, другие связанные данные находятся в других ячейках строки.
Но тогда вам все равно придется подключать другие данные через aria-label или aria-labelled by, чтобы они были доступны для всех.
Правильный способ сделать это — добавить aria-label
к вашему флажку, чтобы он правильно объявлялся программами чтения с экрана:
<Checkbox inputProps = {{ 'aria-label': 'Select row 1' }} />
Таким образом, вы сможете выбрать его в своих тестах, используя getByLabelText
.
Если вы хотите использовать data-testid
, вы можете поставить его на чекбокс аналогично aria-label
:
<Checkbox inputProps = {{ 'data-testid': 'checkbox1' }} />
Обратите внимание, что если вы используете Typescript, вам нужно привести inputProps к React.InputHTMLAttributes<HTMLInputElement>
, поскольку атрибуты данных не являются частью InputHTMLAttributes:
<Checkbox inputProps = {{ 'data-testid': 'checkbox1' } as React.InputHTMLAttributes<HTMLInputElement>} />
Почему у флажка нет метки? Как пользователи, нуждающиеся в вспомогательных технологиях, таких как программа для чтения с экрана, узнают, что означает этот флажок?