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

getByRole does not work for role = term and specifying name = contentOfElement

Open
#1,357 1 comment 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 Framework and version:
>pnpx testing-library-envinfo react

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 22.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @testing-library/cypress: ^10.0.3 => 10.0.3
    @testing-library/dom: ^10.4.0 => 10.4.0
    @testing-library/jest-dom: ^6.6.3 => 6.6.3
    @testing-library/react: ^16.3.0 => 16.3.0
    @testing-library/user-event: ^14.6.1 => 14.6.1
    jsdom: ^25.0.1 => 25.0.1
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1

using vitest 3.1.2

Relevant code or config:

testing playground reproducible:
https://testing-playground.com/gist/9a5293d2879a9166bcaa48dc520982ae/a3984c7d21b6ff2c670a9eb95df5163713d0a5b5

const ReactComponent= () => {
    return (
        <div>
          <dl >
            <dt>foo</dt>
            <dd>bar</dd>
            <dt>baz</dt>
            <dd>qux</dd>
          </dl>
        </div>
    );
};
What you did:

I want to check my component to have the accessible UI inside:
expect(screen.getByRole("term", { name: "foo" })).toBeInTheDocument();

What happened:

RTL is unable to find the an HTML component with that role and term:

TestingLibraryElementError: Unable to find an accessible element with the role "term" and name "foo"

Here are the accessible roles:

  term:

  Name "":
  <dt />

  Name "":
  <dt />

  --------------------------------------------------
  definition:

  Name "":
  <dd />

  Name "":
  <dd />

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

Ignored nodes: comments, script, style
[logging continues but is irrelevant]
Reproduction:

it can be reproduced in this testing library playground:

https://testing-playground.com/gist/9a5293d2879a9166bcaa48dc520982ae/a3984c7d21b6ff2c670a9eb95df5163713d0a5b5

Problem description:

I would like to be able to check that this specific component exists with this accessible role and this name. the first dt can be found with this role and name using screenreaders and can be viewed in the accessibility tree in devtools of the browser, but testing library does not handle this expectation as this works in a production situation.

As per https://testing-library.com/docs/queries/about#priority I prefer to use getByRole, but for now I can use the following (less accessibility using/testing) alternative:
expect(screen.getByText("foo", { selector: "dt" })).toBeInTheDocument();

Suggested solution:

have expect(screen.getByRole("term", { name: "foo" })).toBeInTheDocument(); succeed for the given component.

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 linked Testing Playground reproduction and confirm how getByRole handles the term role with name "foo". Trace the role and accessible-name lookup used by getByRole, then verify that the reproduced expectation succeeds without breaking the existing role output.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
testing
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.