html - Injecting mark or span tag for highlighting breaks component testing

Question

I am using react testing library to test a dropdown component to check if a particular option is available on search and it used to work as expected using the following query that asserts that the option is selected or not.

expect(
      screen.getByRole('option', {
        name: 'ZAT',
        selected: false,
      })
    ).toBeInTheDocument();

Introduced a new feature where I highlight the search term in the options list and the tests started breaking as introducing the mark or span ( with styling applied ) tag is creating an empty space in the test renderer because of which the query is no longer able to find the option with the exact text due to the spaces generated in the accessible element name ( even though the white spaces are collapsed in the DOM )

Wondering if anyone has any pointers as to how I can fix this so that the tests work as expected.

Answer 1

After some investigation found a better solution to the issue I am facing. Instead of relying on the default name that gets associated with the element we can provide the aria-label attribute to the elements in question as ARIA triumphs all as per the this article - Using aria

Injecting the aria-label to the element seems to fix the problem and the tests are working as expected without any changes.

<li
  aria-label="ZAT"
  aria-selected="false"
  class="SearchableDropdown__StyledMenuContent-l5l1l4-4 iNSwly"
  id="downshift-1-item-2"
  role="option"
>
   ....
</li>