testing-library / Eslint Plugin Jest Dom
Programming Languages
eslint-plugin-jest-dom
ESLint plugin to follow best practices and anticipate common mistakes when writing tests with jest-dom.
Table of Contents
Installation
This module is distributed via npm which is bundled with node and
should be installed as one of your project's devDependencies:
npm install --save-dev eslint-plugin-jest-dom
This library has a required peerDependencies listing for [eslint][eslint]
Usage
Add jest-dom to the plugins section of your .eslintrc.js configuration file.
You can omit the eslint-plugin- prefix:
module.exports = {
plugins: ["jest-dom"],
rules: {
// your configuration
},
};
Then configure the rules you want to use under the rules section.
module.exports = {
rules: {
"jest-dom/prefer-checked": "error",
"jest-dom/prefer-enabled-disabled": "error",
"jest-dom/prefer-required": "error",
"jest-dom/prefer-to-have-attribute": "error",
},
};
Recommended Configuration
This plugin exports a recommended configuration that enforces good jest-dom
practices (you can find more info about enabled rules in
Supported Rules section).
To enable this configuration use the extends property in your .eslintrc.js
config file:
module.exports = {
extends: "plugin:jest-dom/recommended",
rules: {
// your configuration
},
};
Supported Rules
👍 indicates that a rule is recommended for all users.
🔧 indicates that a rule is fixable.
| Name | 👍 | 🔧 | Description |
|---|---|---|---|
| prefer-checked | 👍 | 🔧 | prefer toBeChecked over checking attributes |
| prefer-empty | 👍 | 🔧 | Prefer toBeEmpty over checking innerHTML |
| prefer-enabled-disabled | 👍 | 🔧 | prefer toBeDisabled or toBeEnabled over checking attributes |
| prefer-focus | 👍 | 🔧 | prefer toHaveFocus over checking document.activeElement |
| prefer-in-document | 👍 | 🔧 | Prefer .toBeInTheDocument() for asserting the existence of a DOM node |
| prefer-required | 👍 | 🔧 | prefer toBeRequired over checking properties |
| prefer-to-have-attribute | 👍 | 🔧 | prefer toHaveAttribute over checking getAttribute/hasAttribute |
| prefer-to-have-class | 👍 | 🔧 | prefer toHaveClass over checking element className |
| prefer-to-have-style | 👍 | 🔧 | prefer toHaveStyle over checking element style |
| prefer-to-have-text-content | 👍 | 🔧 | Prefer toHaveTextContent over checking element.textContent |
| prefer-to-have-value | 👍 | 🔧 | prefer toHaveValue over checking element.value |
Issues
Looking to contribute? Look for the Good First Issue label.
🐛 Bugs
Please file an issue for bugs, missing documentation, or unexpected behavior.
💡 Feature Requests
Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.
Contributors ✨
Thanks goes to these people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
LICENSE
MIT