You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@testing-library/jest-dom explicitly disallows the use of the level property in getByRole for all roles except heading.
This needs to be broadened as W3 also supports this property on the treeitem, listitem, and row roles.
Relevant code or config:
"@testing-library/jest-dom": "^5.14.1"
"@testing-library/react": "^11.2.7"
test("Can select by role treeitem with level",()=>{render(<Hello/>);expect(screen.getByRole("treeitem",{name: "project-3B.docx",level: 3})).toBeInTheDocument();expect(screen.getByRole("treeitem",{name: "project-3B.docx",level: 1})).not.toBeInTheDocument();});
What you did:
I am trying to select an element with role="treeitem" based on its level. In my actual app I have the same names appearing as both a parent and a child.
What happened:
The test cannot be executed due to an error:
Role "treeitem" cannot have "level" property.
at queryAllByRole (node_modules/@testing-library/dom/dist/queries/role.js:72:13)
at node_modules/@testing-library/dom/dist/query-helpers.js:87:17
at node_modules/@testing-library/dom/dist/query-helpers.js:62:17
at getByRole (node_modules/@testing-library/dom/dist/query-helpers.js:111:19)
at Object. (src/components/bubbles/BubblesScreen.test.tsx:24:28)
if (level !== undefined) {
// guard against using `level` option with any role other than `heading`
if (role !== 'heading') {
throw new Error(`Role "${role}" cannot have "level" property.`)
}
}
Suggested solution:
The code section above needs to be modified to prevent throwing the error.
The actual computation of the level property happens here. The current code will work on treeitem elements which use the explicit aria-level attribute. The implicit level is based on the current item's position in the tree, so additional work needs to be done to compute the implicit level. heading levels can be computed just from the tagName but treeitem levels cannot. It would require some sort of querying of the parents and the tree.
The text was updated successfully, but these errors were encountered:
eps1lon
changed the title
Error: Role "treeitem" cannot have "level" property.
Support filtering by aria-posinsetAug 25, 2021
eps1lon
changed the title
Support filtering by aria-posinset
Error: Role "treeitem" cannot have "level" property
Aug 25, 2021
Summary
@testing-library/jest-dom
explicitly disallows the use of thelevel
property ingetByRole
for all roles exceptheading
.This needs to be broadened as W3 also supports this property on the
treeitem
,listitem
, androw
roles.Relevant code or config:
"@testing-library/jest-dom": "^5.14.1"
"@testing-library/react": "^11.2.7"
What you did:
I am trying to select an element with
role="treeitem"
based on itslevel
. In my actual app I have the same names appearing as both a parent and a child.What happened:
The test cannot be executed due to an error:
Reproduction:
Created a CodeSandbox
Problem description:
The
aria-level
attribute and implicit levels are supported by W3 for multiple roles, as seen here:heading
listitem
row
treeitem
However
@testing-library/dom
does a validation check which only allows forlevel
to be used with theheading
role.The problematic code appears on lines 67-72 of
/src/queries/roles.js
:Suggested solution:
The code section above needs to be modified to prevent throwing the error.
The actual computation of the level property happens here. The current code will work on
treeitem
elements which use the explicitaria-level
attribute. The implicit level is based on the current item's position in the tree, so additional work needs to be done to compute the implicit level.heading
levels can be computed just from thetagName
buttreeitem
levels cannot. It would require some sort of querying of the parents and the tree.The text was updated successfully, but these errors were encountered: