Closed zettadam closed 1 year ago
I think that this on happy-dom's side. Have you tried this with JSDom?
I get these errors when I use jsdom
also.
IIUC, the reason you're seeing this is because the name
attribute isn't treated as an accessible name.
For an input element, the accessible name is it's label (either a label element, an aria-label attribute or aria-labelledby attribute) so changing:
expect(getByRole('textbox', { name: 'field' })).toBeInTheDocument();
to:
expect(getByRole('textbox', { name: 'Field' })).toBeInTheDocument();
With a capital letter will work because that's the label's text.
And what about { selector: 'input' }
? That expectation produces an error. Does selector
here have another library-specific meaning or is it what I think it is or should be?
Two things:
Thanks @MatanBobi ! It makes sense. I missed that part about accessible name.
According to documentation, I can search for an element using query, like
getByRole('textbox', { name: 'field' })
. That query, however, fails with an error "Unable to find an accessible element with the role "textbox" and name: "field", even though the error report shows rendered component as expected DOM tree.Also, query
getByLabelText('Field', { selector: 'input' })
also fails with errorFound a label with the text of: Field, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
even though it is a valid HTML input element wrapped in a label. The error message is incorrect: I don't need to providefor
oraria-labelledby
attributes if an<input />
element is wrapped by a<label />
element.Here's my
TextInput
component:and corresponding test:
Here are relevant dependencies:
Node version? I'm using the latest version locally, and whatever version Stackblitz uses produce the same error. So it might be irrelevant, I think.
Here is a replica of this error: https://stackblitz.com/edit/vitejs-vite-cib1lv?file=src%2FTextInput.test.jsx
Problem description:
getByRole
&getByLabelText
queries don't work as documented whenname
&selector
options are added.Suggested solution:
First, if it is a problem with the queries and not my implementation and test, fix the problem with those queries. I'd rather not revert to
data-testid
or querying the DOM myself :)Second, perhaps it would be good to improve a misleading error message suggesting use of "for" and "aria-labelledby". They are not necessary for accessible
<input />
elements wrapped in a<label />
element.Or am I just misreading documentation?