Библиотека React Testing getByLabelText не является составной частью aria-labelledby

Question

Вдоль строк этой статьи MDN у меня есть флажок ввода, помеченный комбинацией трех различных элементов: метки, текстового поля, а затем другой метки.

Таким образом, вход для флажка имеет атрибут aria-labelledby со значением, подобным label1 text-field label2.

<input type="checkbox" aria-labelledby="allow-up-to num words-in-between" />
<div>
  <label id="allow-up-to">allow up to</label>
  <input id="num" type="text" value="0" />
  <label id="words-in-between">words in between</label>
</div>

В моем тесте я пытаюсь получить флажок на основе этого ярлыка.

Я могу успешно захватить ввод с помощью getByLabelText('text of label1') или getByLabelText('text of label2'), но при присвоении ему полной каскадной метки getByLabelText('text of label1 value of text-field text of label2') ничего не найдено.

getByLabelText("allow up to"); // works
getByLabelText("words in between") // works
getByLabelText("allow up to 0 words in between") // does not work

Попытка getByLabelText('value of text-field') также не работает, но даже если я удалю текстовое поле из aria-labelledby, я все равно не смогу получить ввод с помощью getByLabelText('text of label1 text of label2'). Вот код и окно с упрощенной версией реального пользовательского интерфейса, который я пытаюсь протестировать.

Должен ли getByLabelText работать таким образом (даже если согласно статье MDN несколько меток в aria-labelledby должен быть соединен программой чтения с экрана)? Если да, есть ли другой способ получить ввод с помощью полного текста метки?

Answer 1

Мне удалось заставить его работать с запросом getByRole.

test('gets by complete label', () => {
  const { getByRole } = render(<AllowedWordsBetween />);
  const checkbox = getByRole('checkbox', {
    name: 'allow up to 0 words in between',
  });
  expect(checkbox).toBeInTheDocument();
});

Возможно, это проблема с запросом getByLabelText, но я пока не уверен.