Dom-testing-library: getByLabelText fails with unclear error if aria-labelledby has an invalid target

Created on 21 Jul 2020  路  4Comments  路  Source: testing-library/dom-testing-library

Relevant code or config:

getByLabelText("a11y label text");

What you did:

Identifying an icon

What happened:

TypeError: Cannot read property 'getAttribute' of null

      39 | 
      40 |         test('then the overlay will render', async() => {
    > 41 |             expect(getByLabelText("a11y label text")).toBeTruthy();
         |                    ^
      42 |         });

Reproduction:

When the container does not have a node with id "c0-dialog-0-6-text"

<svg aria-hidden="true" class="icon icon--close" focusable="false" aria-labelledby="c0-dialog-0-6-text">
    <use href="#icon-close"></use>
</svg>

Problem description:

This generates a JS error rather than returning a user friendly test failure. In fact, it should probably just fail the test with no error.

Suggested solution:

I think an appropriate fix would be just to return an empty string from the getLabelContent function when "label" doesn't exist.
https://github.com/testing-library/dom-testing-library/blob/master/src/queries/label-text.js#L54

released

Most helpful comment

Yes, it is totally dued by my changes.

Like @msendlakowski said, the code looks for a label with the id found in the aria-labelledby attribute in some element.

I think that the code flow should go on in a case like this, because this is maybe an incoherence found in the dom but not directly related to the inserted query and the element labeled by the desired value could still be found.

Maybe check if the element with the desired is is null before calling getLabelContent is what I should have done from the beginning.

If it sounds good to all of you I could work on it later today.

All 4 comments

cc @delca85. I think this may be related to your changes. What do you think we should do here?

Yes, it is totally dued by my changes.

Like @msendlakowski said, the code looks for a label with the id found in the aria-labelledby attribute in some element.

I think that the code flow should go on in a case like this, because this is maybe an incoherence found in the dom but not directly related to the inserted query and the element labeled by the desired value could still be found.

Maybe check if the element with the desired is is null before calling getLabelContent is what I should have done from the beginning.

If it sounds good to all of you I could work on it later today.

Sounds great!

:tada: This issue has been resolved in version 7.21.4 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Was this page helpful?
0 / 5 - 0 ratings

Related issues

NiGhTTraX picture NiGhTTraX  路  3Comments

nicolasschabram picture nicolasschabram  路  3Comments

EvgenyOrekhov picture EvgenyOrekhov  路  3Comments

ricardozv28 picture ricardozv28  路  3Comments

rbrtsmith picture rbrtsmith  路  4Comments