How to find out if an element is selected without requerying?

[luke-m]

I want to find out if an element I have already queried for has aria-selected="true". I know that I can do screen.getByRole("bla", { selected: true }) but what if I already have an element saved to a variable and I want to expect that element toBeSelected?

The ariaSelected field is undefined which deviates from the behaviour inside the browser, but I suppose that's a shortcoming of jsdom?

Am I stuck with re-querying for the element and passing selected: true into the options?

[gnapse]

What do you mean with toBeSelected? That's not a custom matcher provided by this library.

However, regardless of that, something like this should work, if that's what you mean:

const button = screen.getByRole('button', { name: 'Click me' })
expect(button).toBeEnabled()

// perform some action that makes the button disabled

expect(button).toBeDisabled()

You do not need to re-query for the button to check that it is disabled.

Unless the "perform some action" part causes the button to be re-mounted. That could happen depending on how you render the two different buttons (the enabled and the disabled one). If you render it using different React components, for instance:

    <div>
        {isEnabled ? <EnabledButton /> : <DisabledButton />}
    </div>

Something like that could cause the button DOM element to be re-mounted instead of updating the same <button/> element, thus causing your variable in the test to become stale, referencing an unmounted DOM element.

Not sure how much of this is releavant to your question, given that it seems to be tied to this hypothetical toBeSelected custom matcher.