TestingLibraryElementError: no form control was found associated for Label and Input elements
nishav11 opened this issue · 2 comments
svelte testing library gives error while using getByLabelText for Textfield Component from SMUI. In the testing library It is mentioned that 'for' and 'id' for label and input elements are not required but still the test fails.
For example the following code is correct according to the testing library https://testing-library.com/docs/queries/bylabeltext
<label> <span>Username 3</span> <input /> </label>
but while running the tests I get error like : Found a label with the text of: Username 3, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
I just tried, and with the component
<label> <span>Username 3</span> <input /> </label>
and the test file
import { expect, test } from 'vitest'
import { render } from '..'
import Comp from './fixtures/Label.svelte'
test('renders component into the document', () => {
const { getByLabelText } = render(Comp)
expect(getByLabelText('Username 3')).toBeInTheDocument()
})
everything works. Closing the issue, but feel free to reopen if you have an example showcasing the failure.