testing-library/svelte-testing-library

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.