Enforces that a data-test-id attribute is present on interactive DOM elements to help with UI testing.
- ❌
<button>Download</button> - ✅
<button data-test-id="download-button">Download</button>
1.0.0- initial release
You'll first need to install ESLint:
$ npm i eslint --save-dev
Next, install @funeralguide/eslint-plugin-test-selectors:
$ npm install @funeralguide/eslint-plugin-test-selectors --save-dev
Note: If you installed ESLint globally (using the -g flag) then you must also install @funeralguide/eslint-plugin-test-selectors globally.
Add @funeralguide/test-selectors to the plugins section of your .eslintrc configuration fil:
{
"plugins": [
"@funeralguide/test-selectors"
]
}If you want to use all the recommended default rules, you can simply add this line to the extends section of your .eslintrc configuration:
{
"extends": [
"plugin:@funeralguide/test-selectors/recommended"
]
}By default, this will run all Supported Rules and emit eslint warnings. If you want to be more strict, you can emit eslint errors by instead using plugin:@funeralguide/test-selectors/recommendedWithErrors.
Another option: you can also selectively enable and disable individual rules in the rules section of your .eslintrc configuration. For instance, if you only want to enable the @funeralguide/test-selectors/button rule, skip the extends addition above and simply add the following to the rules section of your .eslintrc configuration:
{
"rules": {
"@funeralguide/test-selectors/button": ["warn", "always"]
}
}If you like most of the recommended rules by adding the extends option above, but find one in particular to be bothersome, you can simply disable it:
{
"rules": {
"@funeralguide/test-selectors/anchor": "off"
}
}Note: see Supported Rules below for a full list.
All tests can be customized individually by passing an object with one or more of the following properties.
The default test attribute expected is data-test-id, but you can override it with whatever you like. Here is how you would use data-some-custom-attribute instead:
{
"rules": {
"@funeralguide/test-selectors/onChange": ["warn", "always", { "testAttribute": "data-some-custom-attribute" }]
}
}By default all elements with the disabled attribute are ignored, e.g. <input disabled />. If you don't want to ignore this attribute, set ignoreDisabled to false:
{
"rules": {
"@funeralguide/test-selectors/onChange": ["warn", "always", { "ignoreDisabled": false }]
}
}By default all elements with the readonly attribute are ignored, e.g. <input readonly />. If you don't want to ignore this attribute, set ignoreReadonly to false:
{
"rules": {
"@funeralguide/test-selectors/onChange": ["warn", "always", { "ignoreReadonly": false }]
}
}Only supported on button rule, this option will exempt React components called Button from the rule.
{
"rules": {
"@funeralguide/test-selectors/button": ["warn", "always", {"htmlOnly": true}]
}
}There are a few settings that you can set
By default all files will be checked for the rules. However, you can specify a filename as a string to tell ESLint to not check the rules against.
{
"settings": {
"@funeralguide/test-selectors": {
"ignoreFileName": "index.jsx"
}
}
}@funeralguide/test-selectors/anchor@funeralguide/test-selectors/button@funeralguide/test-selectors/input@funeralguide/test-selectors/onChange@funeralguide/test-selectors/onClick@funeralguide/test-selectors/onKeyDown@funeralguide/test-selectors/onKeyUp
If you don't want these test attributes added in production, you can use something like babel-plugin-jsx-remove-data-test-id
Why data attributes and not id or class? Check out some of the following: