Description
@testing-library/domversion: v7.29.0 ( Use@testing-library/reactv11.2.6 )- Testing Framework and version:
jestv2.26.3 - DOM Environment:
jsdomv16.5.3
Relevant code or config:
table element includes th just like Belgium or The Netherlands rowgroup in https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#tables_for_visually_impaired_users
import React from 'react'
function Counter() {
return (
<table>
<caption>Sample Table</caption>
<tbody>
<tr>
<th scope='rowgroup' rowSpan={3}>Group1</th>
<th scope='row'>RowHeader1</th>
<td>Test1</td>
</tr>
<tr>
<th scope='row'>RowHeader2</th>
<td>Test2</td>
</tr>
<tr>
<th scope='row'>RowHeader3</th>
<td>Test3</td>
</tr>
</tbody>
</table>
)
}
export default Counterimport React from 'react'
import {render} from '@testing-library/react'
import Counter from '../'
test('increments the count', () => {
const {getByRole} = render(<Counter />)
expect(getByRole('rowheader', { name: 'Group1' })).toBeVisible()
})What you did:
When using getByRole(..) to get <th scope="rowgroup">..</th>, this element is not rowheader but columnheader.
What happened:
TestingLibraryElementError: Unable to find an accessible element with the role "rowheader" and name "Group1"
Here are the accessible roles:
table:
Name "Sample Table":
<table />
--------------------------------------------------
rowgroup:
Name "":
<tbody />
--------------------------------------------------
row:
Name "Group1 RowHeader1 Test1":
<tr />
Name "RowHeader2 Test2":
<tr />
Name "RowHeader3 Test3":
<tr />
--------------------------------------------------
columnheader:
Name "Group1":
<th
rowspan="3"
scope="rowgroup"
/>
--------------------------------------------------
rowheader:
Name "RowHeader1":
<th
scope="row"
/>
Name "RowHeader2":
<th
scope="row"
/>
Name "RowHeader3":
<th
scope="row"
/>
--------------------------------------------------
cell:
Name "Test1":
<td />
Name "Test2":
<td />
Name "Test3":
<td />
--------------------------------------------------
<body>
<div>
<table>
<caption>
Sample Table
</caption>
<tbody>
<tr>
<th
rowspan="3"
scope="rowgroup"
>
Group1
</th>
<th
scope="row"
>
RowHeader1
</th>
<td>
Test1
</td>
</tr>
<tr>
<th
scope="row"
>
RowHeader2
</th>
<td>
Test2
</td>
</tr>
<tr>
<th
scope="row"
>
RowHeader3
</th>
<td>
Test3
</td>
</tr>
</tbody>
</table>
</div>
</body>
...
Reproduction:
I created reproduction code from template.
https://github.com/wasanx25/dom-testing-library-template
As an aside, I want to create reproduction code using Codesandbox, but can not running test because of this issue.
codesandbox/codesandbox-client#513
Problem description:
In Chrome and Firefox browser, accessible name of <th scope='rowgroup>...</th> is rowheader.
However, in testing-library, it is different so I cannot write expected test code.
Suggested solution:
I submitted this issue according to bug report, if testing-library should do just like browser, I think it should be.