0.0.121 • Published 1 year ago
@mands/eslint-plugin v0.0.121
BETA - this is currently a WIP and things are likely to change.
@mands/eslint-plugin
A collection of custom ESLint rules we use here at M&S to help maintain code quality. Rules can be opted into individually to provide more control over which rules you want to use and at what level of severity.
Installation
pnpm i -D @mands/eslint-plugin
# OR
yarn add --dev @mands/eslint-plugin
# OR
npm i --save-dev @mands/eslint-plugin
Usage
// .eslintrc
{
"plugins": ["@mands/eslint-plugin"],
"rules": {
"@mands/eslint-plugin/jsx-disallow-testid-on-semantic-elements": "error"
},
...
}
Rules
1) @mands/eslint-plugin/jsx-disallow-testid-on-semantic-elements
Enforces best practices with data-testid
as dictated by the React-Testing-Library Docs, by disallowing it on elements with semantic meaning or ARIA generic elements with ARIA attributes.
Supports React components by supplying data-testid (or data-test-id) through props.
Works by checking JSXElements, the Rule differentiates between HTML Elements and React Components within JSX by checking if the JSXElement begins with a capital letter - so will only work in projects following these best practices.
Standard JSX elements support
<!-- ✅ Valid - ARIA Generic element, with no semantic meaning -->
<div data-testid="test">
...
</div>
<!-- ❌ Invalid - element has ARIA semantic attributes, and should be selected with them -->
<div data-testid="test" role="test" aria-label="test">
...
</div>
<!-- ❌ Invalid - semantic element's should avoid use of data-testid -->
<ul data-testid="test">
...
</ul>
<!-- ❌ Invalid - same as above, alternate spelling -->
<ul data-test-id="test">
...
</ul>
React Components Support
// ✅ Valid - ARIA Generic element, with no semantic meaning
const Test = ({'data-testid': dataTestId}) => (
<div data-testid={dataTestId}>
...
</div>);
const Test2 = () => (<Test data-testid='test'></Test>)
// ❌ Invalid - semantic element's should avoid use of data-testid
const Test = ({'data-testid': dataTestId}) => (
<nav data-testid={dataTestId}>
...
</nav>);
const Test2 = () => (<Test data-testid='test'></Test>)
// ❌ Invalid - element has ARIA semantic attributes, and should be selected with them
const Test = ({'data-testid': dataTestId}) => (
<div data-testid={dataTestId} role="test" aria-label="test">
...
</div>);
const Test2 = () => (<Test data-testid='test'></Test>)
Functional Requirements for ESLint rule
- Allows
data-testid
's use on any ARIA generic element, this uses aria-query for the current accessibility web standards. - If an ARIA generic element has a role or any ARIA attribute, disallow use of
data-testid
- Supports React Components in JSX byt passing
data-testid
through component props. - should provide descriptive error messages for correct
data-testid
usage on semantic and generic elements. - Supports alternate spelling of
data-test-id