solid-testing-library icon indicating copy to clipboard operation
solid-testing-library copied to clipboard

getByLabelText fails to run when used in multiple test cases

Open agmcleod opened this issue 6 months ago • 0 comments

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.

agmcleod avatar Aug 14 '24 18:08 agmcleod