eslint-plugin-jest-dom
ESLint plugin to follow best practices and anticipate common mistakes when writing tests with jest-dom.
---
[![Build Status][build-badge]][build]
[![Code Coverage][coverage-badge]][coverage]
[![version][version-badge]][package]
[![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]
[![All Contributors][all-contributors-badge]](#contributors-)
[![PRs Welcome][prs-badge]][prs]
[![Code of Conduct][coc-badge]][coc]
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Recommended Configuration](#recommended-configuration)
- [Supported Rules](#supported-rules)
- [Issues](#issues)
- [π Bugs](#-bugs)
- [π‘ Feature Requests](#-feature-requests)
- [Contributors β¨](#contributors-)
- [LICENSE](#license)
## Installation
This module is distributed via [npm][npm] which is bundled with [node][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`](https://eslint.org/).
## Usage
> [!NOTE]
>
> `eslint.config.js` is supported, though most of the plugin documentation still
> currently uses `.eslintrc` syntax; compatible versions of configs are available
> prefixed with `flat/` 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](https://eslint.org/docs/latest/use/configure/configuration-files-new)
> for more.
Add `jest-dom` to the plugins section of your `.eslintrc.js` configuration file.
You can omit the `eslint-plugin-` prefix:
```javascript
module.exports = {
plugins: ["jest-dom"],
rules: {
// your configuration
},
};
```
Then configure the rules you want to use under the rules section.
```javascript
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](#supported-rules))_.
To enable this configuration with `.eslintrc`, use the `extends` property:
```javascript
module.exports = {
extends: "plugin:jest-dom/recommended",
rules: {
// your configuration
},
};
```
To enable this configuration with `eslint.config.js`, use
`jestDom.configs['flat/recommended']`:
```javascript
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](https://eslint.org/docs/user-guide/command-line-interface#--fix).\
π‘ Manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggestions).
| NameΒ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β | Description | πΌ | π§ | π‘ |
| :----------------------------------------------------------------------- | :-------------------------------------------------------------------- | :-- | :-- | :-- |
| [prefer-checked](docs/rules/prefer-checked.md) | prefer toBeChecked over checking attributes | β
| π§ | |
| [prefer-empty](docs/rules/prefer-empty.md) | Prefer toBeEmpty over checking innerHTML | β
| π§ | |
| [prefer-enabled-disabled](docs/rules/prefer-enabled-disabled.md) | prefer toBeDisabled or toBeEnabled over checking attributes | β
| π§ | |
| [prefer-focus](docs/rules/prefer-focus.md) | prefer toHaveFocus over checking document.activeElement | β
| π§ | |
| [prefer-in-document](docs/rules/prefer-in-document.md) | Prefer .toBeInTheDocument() for asserting the existence of a DOM node | β
| π§ | π‘ |
| [prefer-required](docs/rules/prefer-required.md) | prefer toBeRequired over checking properties | β
| π§ | |
| [prefer-to-have-attribute](docs/rules/prefer-to-have-attribute.md) | prefer toHaveAttribute over checking getAttribute/hasAttribute | β
| π§ | |
| [prefer-to-have-class](docs/rules/prefer-to-have-class.md) | prefer toHaveClass over checking element className | β
| π§ | |
| [prefer-to-have-style](docs/rules/prefer-to-have-style.md) | prefer toHaveStyle over checking element style | β
| π§ | |
| [prefer-to-have-text-content](docs/rules/prefer-to-have-text-content.md) | Prefer toHaveTextContent over checking element.textContent | β
| π§ | |
| [prefer-to-have-value](docs/rules/prefer-to-have-value.md) | prefer toHaveValue over checking element.value | β
| π§ | |
## Issues
_Looking to contribute? Look for the [Good First Issue][good-first-issue]
label._
### π Bugs
Please file an issue for bugs, missing documentation, or unexpected behavior.
[**See Bugs**][bugs]
### π‘ 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.
[**See Feature Requests**][requests]
## Contributors β¨
Thanks goes to these people ([emoji key][emojis]):
