fix aria-labelledby with not found id (#710)

Author: Bianca Del Carretto

src/__tests__/element-queries.js

@@ -1045,3 +1045,30 @@ test('can get an element with aria-labelledby when label has a child', () => {
     '2nd-input',
   )
 })
+test('gets an element when there is an aria-labelledby a not found id', () => {
+  const {getByLabelText} = render(`
+    <div>
+      <input aria-labelledby="not-existing-label"/>
+      <label id="existing-label">Test</label>
+      <input aria-labelledby="existing-label" id="input-id" />
+    </div>
+  `)
+  expect(getByLabelText('Test').id).toBe('input-id')
+})
+
+test('return a proper error message when no label is found and there is an aria-labelledby a not found id', () => {
+  const {getByLabelText} = render(
+    '<input aria-labelledby="not-existing-label"/>',
+  )
+
+  expect(() => getByLabelText('LucyRicardo'))
+    .toThrowErrorMatchingInlineSnapshot(`
+"Unable to find a label with the text of: LucyRicardo
+
+<div>
+  <input
+    aria-labelledby="not-existing-label"
+  />
+</div>"
+`)
+})

src/queries/label-text.js

@@ -79,10 +79,12 @@ function queryAllByLabelText(
       const labelsId = labelledElement.getAttribute('aria-labelledby')
         ? labelledElement.getAttribute('aria-labelledby').split(' ')
         : []
-      const labelsValue = labelsId.length
+      let labelsValue = labelsId.length
         ? labelsId.map(labelId => {
-            const labellingElement = container.querySelector(`[id="${labelId}"]`)
-            return getLabelContent(labellingElement)
+            const labellingElement = container.querySelector(
+              `[id="${labelId}"]`,
+            )
+            return labellingElement ? getLabelContent(labellingElement) : ''
           })
         : Array.from(labelledElement.labels).map(label => {
             const textToMatch = getLabelContent(label)
@@ -99,6 +101,7 @@ function queryAllByLabelText(
             }
             return textToMatch
           })
+      labelsValue = labelsValue.filter(Boolean)
       if (
         matcher(labelsValue.join(' '), labelledElement, text, matchNormalizer)
       )