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
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 use the `extends` property in your `.eslintrc.js`
config file:
```javascript
module.exports = {
extends: "plugin:jest-dom/recommended",
rules: {
// your configuration
},
};
```
## 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).
| 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]):
