ESLint: Enable testing-library/no-node-access rule
#46703
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tyxla
requested review from
Mamaduka,
mirka,
jsnajdr,
ciampo,
flootr,
chad1008,
ntsekouras and
brookewp
tyxla
force-pushed
the
enable/no-node-access
branch
from
eee6845 to
34224b2
Compare
tyxla
commented
Dec 21, 2022
| @@ -372,9 +372,6 @@ module.exports = { | |||
| 'plugin:jest-dom/recommended', | |||
| 'plugin:testing-library/react', | |||
| ], | |||
| rules: { | |||
| 'testing-library/no-node-access': 'off', | |||
There was a problem hiding this comment.
Removing this as it's now enabled as part of the plugin:testing-library/react recommended rules.
Comment on lines
+16
to
+18
| function getIconWrapper( container ) { | ||
| return container.firstChild; | ||
| } |
There was a problem hiding this comment.
Creating a wrapper function for this doesn't only allow us to reduce code repetition and have the violation only in one place; it actually tricks the linter - there's no need for a rule ignore here.
Comment on lines
+380
to
+387
| const searchResultTextHighlightElements = within( searchResults ) | ||
| .getAllByRole( 'option' ) | ||
| // TODO: Change to `getByRole( 'mark' )` when officially supported by | ||
| // WAI-ARIA 1.3 - see https://w3c.github.io/aria/#mark | ||
| // eslint-disable-next-line testing-library/no-node-access | ||
| .map( ( searchResult ) => searchResult.querySelector( 'mark' ) ) | ||
| .flat() | ||
| .filter( Boolean ); |
There was a problem hiding this comment.
As per https://w3c.github.io/aria/#mark mark is not yet an officially supported role, but the rest of the query was convertible to screen queries, so we went for this.
| @@ -1092,6 +1098,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { | |||
|
|
|||
| // Check human readable error notice is perceivable. | |||
| expect( errorNotice ).toBeVisible(); | |||
| // eslint-disable-next-line testing-library/no-node-access | |||
| expect( errorNotice.parentElement ).toHaveClass( | |||
There was a problem hiding this comment.
There's currently no accessible way to access the parent element.
| @@ -1324,7 +1331,8 @@ describe( 'Selecting links', () => { | |||
| } ); | |||
|
|
|||
| // Make sure focus is retained after submission. | |||
| expect( container ).toContainElement( document.activeElement ); | |||
| // eslint-disable-next-line testing-library/no-node-access | |||
| expect( container.firstChild ).toHaveFocus(); | |||
There was a problem hiding this comment.
This is a bit more specific than checking if any element inside the rendered tree has the focus.
| @@ -11,6 +11,7 @@ import TextHighlight from '..'; | |||
| const getMarks = ( container: Element ) => | |||
| // Use querySelectorAll because the `mark` role is not officially supported | |||
| // yet. This should be changed to `getByRole` when it is. | |||
| // eslint-disable-next-line testing-library/no-node-access | |||
There was a problem hiding this comment.
Just as I mentioned above for the still unsupported mark role.
| @@ -81,9 +81,11 @@ describe( 'ToolbarGroup', () => { | |||
| const buttons = screen.getAllByRole( 'button' ); | |||
|
|
|||
| expect( buttons ).toHaveLength( 2 ); | |||
| // eslint-disable-next-line testing-library/no-node-access | |||
There was a problem hiding this comment.
There's currently no accessible way to access the parent element.
| expect( buttons[ 0 ].parentElement ).not.toHaveClass( | ||
| 'has-left-divider' | ||
| ); | ||
| // eslint-disable-next-line testing-library/no-node-access |
There was a problem hiding this comment.
There's currently no accessible way to access the parent element.
| @@ -112,6 +112,7 @@ describe( 'UnitControl', () => { | |||
| ); | |||
|
|
|||
| expect( | |||
| // eslint-disable-next-line testing-library/no-node-access | |||
There was a problem hiding this comment.
There's currently no accessible way to access the wrapper element of the unit control component.
| @@ -152,6 +152,7 @@ describe( 'listener hook tests', () => { | |||
| const setAttribute = jest.fn(); | |||
| const mockSelector = jest.fn(); | |||
| beforeEach( () => { | |||
| // eslint-disable-next-line testing-library/no-node-access | |||
There was a problem hiding this comment.
This is a false positive, so it should intentionally be ignored.
|
Size Change: 0 B Total Size: 1.32 MB ℹ️ View Unchanged
|
mirka
approved these changes
Dec 21, 2022
Comment on lines
+16
to
+18
| function getIconWrapper( container ) { | ||
| return container.firstChild; | ||
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR ignores the remaining unfixable or "refactor-too-much" ESLint violations and enables the
no-node-accessrule. With this, the recommended rules for@testing-libraryare now enabled and in use without any errors/warnings.Why?
We set out to improve the test code quality by enabling a few ESLint plugins and this PR is a step in that direction.
How?
We're ignoring a few remaining violations and removing the specific disabling of the rule, which enables the rule as part of the testing library recommended rules.
Testing Instructions
npm run lint:js