solid-testing-library
solid-testing-library copied to clipboard
getByLabelText fails to run when used in multiple test cases
Ran into this on my own project, so I created a reproducable example (full repo here: https://github.com/agmcleod/solid-testing-library-bug). I generated the example repo with solid start, but the only changes i made were to create an example input component with a label.
import { it, describe, expect } from 'vitest'
import { render, fireEvent, waitFor } from '@solidjs/testing-library'
import Input from './input'
describe('Input', () => {
it('updates the input', async () => {
const { findByLabelText } = render(() => <Input />)
const el = await findByLabelText(/label text/i)
fireEvent.change(el, {
target: {
value: 'new input',
},
})
})
it('updates the input again', async () => {
const { findByLabelText } = render(() => <Input />)
const el = await findByLabelText(/label text/i)
fireEvent.change(el, {
target: {
value: 'new input again',
},
})
})
})
When the test suite runs, the second example which uses the same findByLabelText call fails to find the element with the following error:
TestingLibraryElementError: Found a label with the text of: /label text/i, however the element associated with this label () is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a , you can use aria-label or aria-labelledby instead.
If I then comment out the first test case and run yarn test
the second test case will then pass. Likewise if I uncomment the test case, and use an id on the label tag, and then update the input to use aria-labelledby
both tests will pass. So this must be something with the for attribute usecase.