Custom ESLint rules for Testing Library to enforce best practices and encourage the use of semantic elements over data-testid attributes.
npm install eslint-plugin-rtl-test-attributes
Custom ESLint rules for React Testing Library to enforce best practices and encourage the use of semantic elements over data-testid attributes.
``bash`
npm install --save-dev eslint-plugin-rtl-test-attributes
orbash`
npm i -D eslint-plugin-rtl-test-attributes
javascript
module.exports = {
plugins: ['rtl-test-attributes'],
rules: {
'eslint-plugin-rtl-test-attributes/avoid-data-testid': 'error',
},
};
`Rules
$3
This rule discourages the use of
attributes in JSX code, as it adds unnecessary attributes to the production output HTML. The data-testid attribute is primarily intended for unit testing purposes and should not be present in the final production code unless absolutely necessary.This encourages the use of semantic elements, ARIA attributes or elements that are easily accessible and can be caught by the Testing Library API.Non semantic elements without any accesibility-friendly attributes are hard to query by Testing Library API.
Few examples of preferred alternatives for using
data-testid attribute:
- Use semantic elements like