Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/testing-library/eslint-plugin-jest-dom

eslint rules for use with jest-dom
https://github.com/testing-library/eslint-plugin-jest-dom

Last synced: 26 days ago
JSON representation

eslint rules for use with jest-dom

Host: GitHub
URL: https://github.com/testing-library/eslint-plugin-jest-dom
Owner: testing-library
License: mit
Created: 2019-10-27T23:29:30.000Z (about 5 years ago)
Default Branch: main
Last Pushed: 2024-07-22T17:15:45.000Z (5 months ago)
Last Synced: 2024-11-15T01:31:23.510Z (29 days ago)
Language: JavaScript
Homepage:
Size: 313 KB
Stars: 361
Watchers: 8
Forks: 40
Open Issues: 7
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-jest - eslint-plugin-jest-dom - library/jest-dom](https://github.com/testing-library/jest-dom). (Packages / Linting)
awesome-eslint - Jest-DOM - Linting rules for Jest-DOM. (Plugins / Testing Tools)

README

        


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]):

  

    
_{Ben Monro}
📖 💻 💡 ⚠️

    
_{Nick McCurdy}
💻 📖 ⚠️

    
_{Ernesto García}
📖

    
_{Chris Colborne}
💻 ⚠️

    
_{Michaël De Boey}
💻

    
_{Gerrit Alex}
💻 ⚠️ 📖 🐛

    
_{Andrey Los}
🐛

  

  

    
_{Spencer Miskoviak}
💻 ⚠️

    
_{Aleksei Tsikov}
🐛

    
_{Mario Beltrán Alarcón}
📖

    
_{Ari Perkkiö}
🐛 💻 ⚠️

    
_{Anton Niklasson}
💻 ⚠️ 📖

    
_{Juzer Zarif}
💻 ⚠️ 🐛

    
_{Julien Wajsberg}
💻 ⚠️

  

  

    
_{Gareth Jones}
⚠️ 💻 🐛

    
_{Huyen Nguyen}
📖

    
_Matthew
🐛 💻

  

This project follows the [all-contributors][all-contributors] specification.

Contributions of any kind welcome!

## LICENSE

MIT

[npm]: https://www.npmjs.com

[node]: https://nodejs.org

[build-badge]: https://img.shields.io/github/actions/workflow/status/testing-library/eslint-plugin-jest-dom/validate.yml?logo=github&style=flat-square

[build]: https://github.com/testing-library/eslint-plugin-jest-dom/actions?query=workflow%3Avalidate

[coverage-badge]: https://img.shields.io/codecov/c/github/testing-library/eslint-plugin-jest-dom.svg?style=flat-square

[coverage]: https://codecov.io/github/testing-library/eslint-plugin-jest-dom

[version-badge]: https://img.shields.io/npm/v/eslint-plugin-jest-dom.svg?style=flat-square

[package]: https://www.npmjs.com/package/eslint-plugin-jest-dom

[downloads-badge]: https://img.shields.io/npm/dm/eslint-plugin-jest-dom.svg?style=flat-square

[npmtrends]: http://www.npmtrends.com/eslint-plugin-jest-dom

[license-badge]: https://img.shields.io/npm/l/eslint-plugin-jest-dom.svg?style=flat-square

[license]: https://github.com/testing-library/eslint-plugin-jest-dom/blob/main/LICENSE

[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square

[prs]: http://makeapullrequest.com

[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square

[coc]: https://github.com/testing-library/eslint-plugin-jest-dom/blob/main/other/CODE_OF_CONDUCT.md

[emojis]: https://github.com/all-contributors/all-contributors#emoji-key

[all-contributors]: https://github.com/all-contributors/all-contributors

[all-contributors-badge]: https://img.shields.io/github/all-contributors/testing-library/eslint-plugin-jest-dom?style=flat-square

[bugs]: https://github.com/testing-library/eslint-plugin-jest-dom/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Acreated-desc+label%3Abug

[requests]: https://github.com/testing-library/eslint-plugin-jest-dom/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement

[good-first-issue]: https://github.com/testing-library/eslint-plugin-jest-dom/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement+label%3A%22good+first+issue%22