Closed
Description
@testing-library/domversion: 7.29.0- Testing Framework and version: jest@26.6.0
- DOM Environment: jsdom@16.4.0
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.