testing-library / testing-library/react-testing-library

logRoles does not print hidden elements

Open
#1,201 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
19.7k
Forks
1.2k
Avg merge
3d 16h
Merged PRs (30d)
1

Description

  • @testing-library/react version: 14.0.0
  • Testing Framework and version: Jest 29.4.3
  • DOM Environment: jsdom 29.4.3
Relevant code or config:
const buttons = await waitFor(
    screen.getAllByRole("button", { hidden: true })
);

logRoles(buttons)
What you did:

I was trying to logRoles for a DOM tree with hidden elements. Failed to see the elements show in the roles list.

What happened:

Logging roles for hidden elements produces an empty log.

Reproduction:
  1. Get all elements of a DOM tree including hidden ones. Make sure you have hidden ones.
  2. Log using logRoles
  3. See that some log entries are empty compared to what you see when you screen.debug
Problem description:

If you log an element you found using { hidden: true }, logRoles will not print it. Similarly won't print hidden elements in a DOM tree you pass in. This is the opposite of what I would expect from this tool. I want to know why something may be failing to query, so I want to see everything in the tree.
The logRole function does take a { hidden } parameter and by default is set to false, however the function signature in Typescript does not accept a second parameter.

Suggested solution:

A useful thing would be that hidden was on by default, the function signature would be updated to take the second parameter, and that elements logged that are hidden, report so in the pretty role output.

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 at the logRoles and logRole entry points, especially the TypeScript signature mentioned in the issue, and reproduce the empty output with hidden elements. Compare the role output with screen.debug; done means hidden elements are included as requested, the second parameter is accepted, and the relevant output distinguishes hidden elements.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
testing-qa
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.