testing-library / testing-library/dom-testing-library

getByRole doesn't normalize the node text

Open
#890 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
3.3k
Forks
474
PR merge metrics
No merged PRs in 30d

Description

  • @testing-library/dom version: 7.29.4
  • Testing Framework and version: jest 26.6.0 (react-scripts 4.0.2)
  • DOM Environment: jsdom 16.4.0
Relevant code or config:
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";

it("doesn't work", () => {
  render(<button>Click&nbsp;me</button>);

  expect(
    screen.getByRole(
      "button",
      { name: "Click me" }
    )
  ).toBeInTheDocument();
});
What you did:

Tried querying by role. The component text contains &nbsp;

What happened:
Unable to find an accessible element with the role "button" and name "Click me"

Here are the accessible roles:

  button:

  Name "Click me":
  <button />

  --------------------------------------------------

<body>
  <div>
    <button>
      Click me
    </button>
  </div>
</body>
Reproduction:

https://codesandbox.io/s/billowing-sound-xtnjm?file=/src/role.test.js

Problem description:

This contradicts the documentation

Before running any matching logic against text in the DOM, DOM Testing Library automatically normalizes that text. By default, normalization consists of trimming whitespace from the start and end of text, and collapsing multiple adjacent whitespace characters into a single space.

Suggested solution:

https://github.com/testing-library/dom-testing-library/blob/5bc93643f312d9ca4210b97681686c9aa8a902d7/src/queries/role.js#L156

should probably be

matchNormalizer,

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 in src/queries/role.js around the referenced line and compare the role query's text matching with the normalization behavior described in the documentation. Use the provided reproduction to verify that getByRole handles the non-breaking space consistently with the documented normalization rules.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
testing-qa
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.