@mands/eslint-plugin

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.

• MDN ARIA
• React-Testing-Library Docs
• aria-query

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