testing-library / testing-library/testing-library-docs

Description option on findByLabel for password input tests

Open
#1,181 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
479
Forks
740
PR merge metrics
No merged PRs in 30d

Description

Is your feature request related to a problem? Please describe.

I am trying to test that the inputs in my form have correct inline validation errors set as aria descriptions. This works great when the input is simply a textbox:

<Label>
  Email
  <input type="text' aria-describedby="emailError" />
</Label>
<div id="emailError">Please enter a valid email address</div>

...

expect(findbyRole('textbox', {
    name: 'Email',
    description: 'Please enter a valid email'
})).toBeInTheDocument();

However, when the input is a password since it has no role I cannot use the description field on getByRole to find the element.

Describe the solution you'd like

This issue recommends using getByLabelText for password inputs, so it would be a lot easier if that query could also search by description.

<Label>
  Password
  <input type="password' aria-describedby="passwordError" />
</Label>
<div id="passwordError">Please enter your password</div>

...

expect(findByLabelText('Password', {
    description: 'Please enter your password'
})).toBeInTheDocument();

Describe alternatives you've considered

Alternatively, if react-testing library could do some magic that means findByRole('password') just works, then that would be a very simple solution and most users probably wouldn't event have to think about it.

For now my tests merely assert that the error exists in the page and ignore the describedby connection.

expect(await screen.findByText('Please enter your new password')).toBeInTheDocument();

Additional context Add any other context or screenshots about the feature
request here.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the getByLabelText query and the linked dom-testing-library issue 567; the request is to support a description option for password inputs. Compare the existing getByRole description behavior with getByLabelText, then verify the requested password example and its aria-describedby text in the relevant query tests. The payload names no source file or test path, so locating those entry points is part of the work.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
testing-qa
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.