Install
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.
Usage
[!NOTE]
eslint.config.jsis supported, though most of the plugin documentation still
currently uses.eslintrcsyntax; compatible versions of configs are available
prefixed withflat/and may be subject to small breaking changes while ESLint
v9 is being finalized.Refer to the
ESLint documentation on the new configuration file format
for more.
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 with .eslintrc, use the extends property:
module.exports = {
extends: "plugin:jest-dom/recommended",
rules: {
// your configuration
},
};
To enable this configuration with eslint.config.js, use
jestDom.configs['flat/recommended']:
module.exports = [
{
files: [
/* glob matching your test files */
],
...require("eslint-plugin-jest-dom").configs["flat/recommended"],
},
];
Supported Rules
💼 Configurations enabled in.
✅ Set in the recommended configuration.
🔧 Automatically fixable by the --fix CLI option.
💡 Manually fixable by editor suggestions.
| 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
