Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

getByLabelText fails to run when used in multiple test cases #66

Open
agmcleod opened this issue Aug 14, 2024 · 0 comments
Open

getByLabelText fails to run when used in multiple test cases #66

agmcleod opened this issue Aug 14, 2024 · 0 comments

Comments

@agmcleod
Copy link

agmcleod commented Aug 14, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant