Solved: input is treated as non-labellable

• @testing-library/dom version: 7.29.4
• Testing Framework and version: mocha 5.2.0
• DOM Environment: jsdom 11.0.0

Relevant code or config:

Edited example for simplicity:

import React from 'react'
import {render} from '@testing-library/react'

const Label = () => {
  return (
    <div>
      <label htmlFor="first_name">First name</label>
      <input
        id="first_name"
        name="first_name"
        type="text"
        value=""
        onChange={() => {}}
      />
    </div>
  )
}

test('Renders a label', () => {
  const content = render(<Label />)
  content.getByLabelText('First name')
})

What you did:

What happened:

I got an error:

TestingLibraryElementError: Found a label with the text of: First name, however the element associated with this label (<input />) is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a <input />, you can use aria-label or aria-labelledby instead.

I can’t tell why the input is not labellable. It doesn’t have a type of hidden, which seems to be the only reason it could be.

Reproduction:

https://github.com/IanVS/testing-library-877

Problem description:

It is preventing me from upgrading from a very old version of react-testing-library.

Suggested solution:

Solved: Upgrade JSDom to at least 11.11.0.

[IanVS]

OK, knowing that codesandbox wasn’t executing my mocha + jsdom was a good clue. I was able to narrow this down to jsdom versions less than 11.11.0. Upgrading to that version solves this error. https://github.com/jsdom/jsdom/blob/master/Changelog.md#11110

Hopefully this issue report will be useful for anyone else who hits this error.

[MatanBobi]

Thanks for the thorough explanation @IanVS!