getByRole with name not working properly for output element #866

ptamarit · 2020-12-30T14:46:42Z

@testing-library/dom version: 7.29.0
Testing Framework and version: [email protected]
DOM Environment: [email protected]

Relevant code or config:

// App.tsx

function App() {
  return (
    <>
      <label htmlFor="outputid">Output Label</label>
      <output id="outputid"></output>
    </>
  );
}

// App.text.tsx

import { render, screen } from '@testing-library/react';
import App from './App';

test('get output by role and label', () => {
  render(<App />);
  const output = screen.getByRole('status', { name: /output label/i });
  expect(output).toBeInTheDocument();
});

What you did:

npm test

What happened:

 FAIL  src/App.test.tsx
  ✕ get output by role and label (145 ms)

  ● get output by role and label

    TestingLibraryElementError: Unable to find an accessible element with the role "status" and name `/output label/i`

    Here are the accessible roles:

      status:

      Name "":
      <output
        id="outputid"
      />

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

    <body>
      <div>
        <label
          for="outputid"
        >
          Output Label
        </label>
        <output
          id="outputid"
        />
      </div>
    </body>

    >  8 |   const output = screen.getByRole('status', { name: /output label/i });
         |                         ^
       9 |   expect(output).toBeInTheDocument();
      10 | });
      11 | 

      at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
      at node_modules/@testing-library/dom/dist/query-helpers.js:90:38
      at node_modules/@testing-library/dom/dist/query-helpers.js:62:17
      at getByRole (node_modules/@testing-library/dom/dist/query-helpers.js:106:19)
      at Object.<anonymous> (src/App.test.tsx:8:25)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.545 s
Ran all test suites related to changed files.

Reproduction:

Problem description:

The accessible role "status" should have the name "Output Label", but the error help message shows that the name is empty.

Suggested solution:

The text was updated successfully, but these errors were encountered:

eps1lon · 2020-12-30T15:41:02Z

Thanks for the report. Could you run npx testing-library-envinfo react in your project folder and post the output?

ptamarit · 2020-12-30T16:30:56Z

$ npx testing-library-envinfo react

  System:
    OS: Linux 5.9 Fedora 33 (Workstation Edition) 33 (Workstation Edition)
  Binaries:
    Node: 14.15.1 - /usr/bin/node
    Yarn: Not Found
    npm: 6.14.8 - /usr/bin/npm
  npmPackages:
    @testing-library/dom:  7.29.0 
    @testing-library/jest-dom: ^5.11.8 => 5.11.8 
    @testing-library/react: ^11.2.2 => 11.2.2 
    @testing-library/user-event: ^12.6.0 => 12.6.0 
    aria-query:  4.2.2 
    dom-accessibility-api:  0.5.4 
    jest:  26.6.0 
    jsdom:  16.4.0 
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1

amy-mac · 2020-12-30T17:44:50Z

I found this same exact problem with definition and term roles. For definition the name is empty, and for term, it's not recognized as an accessible role by the testing library, even though it is one. Ah, I see that's addressed here: #703 I wonder if status has a similar issue.

ParkerM · 2021-03-28T19:48:59Z

This is especially confusing when using testing-playground, which correctly recognizes and suggests getByRole('status') for <output> elements, but incorrectly states

You could still make the query a bit more specific by adding the name option. This would require to add some markup though, as your element isn't named properly.

See example here: https://testing-playground.com/gist/245483648b836ab0f47ff6912d7ed310/e09e4502784d8d22535c6a6b02ec7ad650e941ce

Edit: I found this issue by searching for the error message Unable to find an accessible element with the role "status", in which getByRole('status') was failing even without providing any options. I think my case stems from a different issue related to using @testing-library/angular with @angular-builders/jest.
(Apologies for the noise. I figured I should mention this to help others that also landed here via google.)

eps1lon added the bug Something isn't working label Jun 2, 2021

eps1lon self-assigned this Jun 2, 2021

This was referenced Jun 2, 2021

fix: Consider <label /> when computing the accessible name of <output /> eps1lon/dom-accessibility-api#666

Merged

fix: Consider <output /> labelable #968

Merged

eps1lon closed this as completed in #968 Jun 3, 2021

Vinnl mentioned this issue Dec 30, 2021

definition names aren't detected #1083

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

getByRole with name not working properly for output element #866

getByRole with name not working properly for output element #866

ptamarit commented Dec 30, 2020

eps1lon commented Dec 30, 2020

ptamarit commented Dec 30, 2020 •

edited

Loading

amy-mac commented Dec 30, 2020 •

edited

Loading

ParkerM commented Mar 28, 2021 •

edited

Loading

getByRole with name not working properly for output element #866

getByRole with name not working properly for output element #866

Comments

ptamarit commented Dec 30, 2020

Relevant code or config:

What you did:

What happened:

Reproduction:

Problem description:

Suggested solution:

eps1lon commented Dec 30, 2020

ptamarit commented Dec 30, 2020 • edited Loading

amy-mac commented Dec 30, 2020 • edited Loading

ParkerM commented Mar 28, 2021 • edited Loading

ptamarit commented Dec 30, 2020 •

edited

Loading

amy-mac commented Dec 30, 2020 •

edited

Loading

ParkerM commented Mar 28, 2021 •

edited

Loading