Property "hidden" is unintuitive

[alxbradley]

I'm fairly new to testing-library and I spent nearly an hour trying to figure out why my dialog isn't found by findByRole.

I can SEE my dialog in the DOM, but there's no error message like, "Hey, I see the dialog in the DOM, but it's hidden, add {hidden: true} to your query".

Sure, this might be a skill issue. I forgot that dialogs are hidden from the accessibility tree. But I can SEE the dialog, so it's not hidden right?

Describe the feature you'd like:

I can think of a few options,

1. Change the name from 'hidden' to something that captures the meaning better. Maybe ariaHidden
2. Show helpful errors
   Maybe when you print the DOM to screen show a label next to it such as:

    <dialog (hidden=true)
        aria-label=".."
        role="dialog"
     >

3. Add a hint in the error log Unable to find role="dialog". Try adding "{hidden: true}" to your query

[MatanBobi]

Actually, hidden is an escape hatch and shouldn't be used. It means we're skipping visibility checks so your test might not mimic the user's experience correctly. If the dialog isn't shown in the tests - is it even opened? are you missing a step to open it?
Here's an example: https://stackblitz.com/edit/rtl-template-ubvsct6k?file=src%2FApp.test.tsx

[alxbradley]

@MatanBobi Hmm, it's opened by default when the component mounts (in svelte) and I can see the methods called correctly. I wonder if svelte has something to do with it.

[alxbradley]

When I add the property <dialog open={isOpen} ... to the dialog, I no longer need {hidden: true}. Funny enough, the test still passes even when hidden: true is passed.

[alxbradley]

Ok, this seems to be a problem with jsdom not fully implementing the HTMLDialogElement spec.

testing-library/react-testing-library#1106

Code has been pending for 3 years!
jsdom/jsdom#3403