*ByLabelText can't find password inputs

[DanielGibbsNZ]

Environment

• @testing-library/dom version: 7.22.1
• jest version: 22.4.4
• jest-environment-jsdom version: 22.4.3
• yarn version: 1.22.4
• node version: 10.15.3

Relevant code or config:

export const App = () => (
  <div>
    <label for="password">Password</label>
    <input id="password" type="password" />
  </div>
);

import "@testing-library/jest-dom/extend-expect";
import React from "react";
import { render } from "@testing-library/react";
import { App } from "../index";

test("React Testing Library works!", () => {
  const { getByRole } = render(<App />);
  const passwordField = getByRole("textbox");
  expect(passwordField).toBeInTheDocument();
});

What you did:

I tried to get a password input using getByRole("textbox"). I've also tried getByLabelText("Password").

What happened:

No element is found, and an error message such as Unable to find an element with the role "textbox" is shown.

Reproduction:

https://codesandbox.io/s/react-testing-library-getbyrole-password-issue-roy0l

Problem description:

It makes it difficult to test a login form without falling back to query selectors or test IDs, something that the library guidelines say should only be used if there is no other choice.

Suggested solution:

Either allow password fields to be found using getByRole("textbox") or support another role if appropriate.

Supporting password fields in getByLabelText would also solve the problem for me.

[kentcdodds]

Hi @DanielGibbsNZ,

Read up on this limitation here: #567

password fields are absolutely accessible via *ByLabelText queries and that's what's recommended.

[DanielGibbsNZ]

@kentcdodds Sorry about that. I thought I searched the issues for "password" but I may have been searching the wrong repo (probably react-testing-library).

I've tried using getByLabelText for the password field, but I get the error:

 TestingLibraryElementError: Found a label with the text of: Password, 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.

This seems odd given that the linked document explicity says that a (non-hidden) input should be labellable. that Is this another known issue, or should I raise a bug for this?

[kentcdodds]

This is a bug. I'll retitle and reopen this issue.

If you'd like to dive in and fix this then here's the file you'll be working in: https://github.com/testing-library/dom-testing-library/blob/master/src/queries/label-text.js

And here's where you could add a test for this case: https://github.com/testing-library/dom-testing-library/blob/master/src/__tests__/element-queries.js

Let me know. If you don't have time or don't want to, I can fix this one later today.

[delca85]

It looks like to me getByLabelText is working well, as the codesandbox posted by @DanielGibbsNZ shows.

Sorry if I am missing something. I just jumped in this issue and I would have liked to help so I tried to add a test in our code base and it works, then I checked the codesandbox and it looks like working as well (with getByLabelText).

[kentcdodds]

Thanks @delca85,

I'm guessing the issue is the version of JSDOM being used. I'd suggest upgrading to the latest version. Considering that, there's nothing more we can do here.

[DanielGibbsNZ]

Yep that seems to be it, upgrading jsdom from 11.6.2 to 11.12.0 seems to have resolved the issue, sorry for wasting your time!

[kentcdodds]

No worries @DanielGibbsNZ :)

[modernserf]

I came across this issue while fruitlessly googling If you really need to label a <input /> -- in my case, the problem was not with an outdated version of jsdom; instead, the problem was actually that I had multiple inputs with the same ID. Hope this info comes in handy for future generations!

[oscaralanpierce]

For others who may be reading this, don't discount what @modernserf says even if you're sure you aren't rendering multiple elements with the same ID!

I had this issue too and it turned out to be that this issue with the React testing library was leading to there being a ghost DOM that contained the element in question in addition to the one I had rendered for that test. Unfortunately, it seems there's not a good solution to the ghost DOM issue yet, but I've mitigated it by separating offending tests into their own files. A bit annoying but it got the tests working.