File Manager

Current Path: Root / node_modules/ eslint-plugin-testing-library

Parent Directory

Name	Size	Last Modified
[D]configs/	-	2022-10-08 17:28:27
[D]create-testing-library-rule/	-	2022-10-08 17:28:24
[D]node-utils/	-	2022-10-08 17:28:25
[D]rules/	-	2022-10-08 17:28:27
[D]utils/	-	2022-10-08 17:28:27
[F]LICENSE	1.05 KB	2022-10-08 17:28:23
[F]README.md Edit	47.41 KB	2022-10-08 17:28:27
[F]index.js Edit	345 bytes	2022-10-08 17:28:25
[F]package.json Edit	2.43 KB	2022-10-08 17:28:27

Editing: README.md

<div align="center">
 <a href="https://eslint.org/">
 <img width="150" height="150" src="https://raw.githubusercontent.com/eslint/eslint/main/docs/src/static/favicon.png">
 </a>
 <a href="https://testing-library.com/">
 <img width="150" height="150" src="https://raw.githubusercontent.com/testing-library/dom-testing-library/master/other/octopus.png">
 </a>
 <h1>eslint-plugin-testing-library</h1>
 ESLint plugin to follow best practices and anticipate common mistakes when writing tests with Testing Library
</div>

---

[![Build status][build-badge]][build-url]
[![Package version][version-badge]][version-url]
[![eslint-remote-tester][eslint-remote-tester-badge]][eslint-remote-tester-workflow]
[![eslint-plugin-testing-library][package-health-badge]][package-health-url]
[![MIT License][license-badge]][license-url]
 
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
[![PRs Welcome][pr-badge]][pr-url]
[![All Contributors][all-contributors-badge]](#contributors-)
 
[![Watch on Github][gh-watchers-badge]][gh-watchers-url]
[![Star on Github][gh-stars-badge]][gh-stars-url]
[![Tweet][tweet-badge]][tweet-url]

## Installation

You'll first need to install [ESLint](https://eslint.org):

```shell
$ npm install --save-dev eslint
# or
$ yarn add --dev eslint
```

Next, install `eslint-plugin-testing-library`:

```shell
$ npm install --save-dev eslint-plugin-testing-library
# or
$ yarn add --dev eslint-plugin-testing-library
```

**Note:** If you installed ESLint globally (using the `-g` flag) then you must also install `eslint-plugin-testing-library` globally.

## Migrating

You can find detailed guides for migrating `eslint-plugin-testing-library` in the [migration guide docs](docs/migration-guides):

- [Migrate guide for v4](docs/migration-guides/v4.md)
- [Migrate guide for v5](docs/migration-guides/v5.md)

## Usage

Add `testing-library` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:

```json
{
	"plugins": ["testing-library"]
}
```

Then configure the rules you want to use within `rules` property of your `.eslintrc`:

```json
{
	"rules": {
		"testing-library/await-async-query": "error",
		"testing-library/no-await-sync-query": "error",
		"testing-library/no-debugging-utils": "warn",
		"testing-library/no-dom-import": "off"
	}
}
```

### Run the plugin only against test files

With the default setup mentioned before, `eslint-plugin-testing-library` will be run against your whole codebase. If you want to run this plugin only against your tests files, you have the following options:

#### ESLint `overrides`

One way of restricting ESLint config by file patterns is by using [ESLint `overrides`](https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns).

Assuming you are using the same pattern for your test files as [Jest by default](https://jestjs.io/docs/configuration#testmatch-arraystring), the following config would run `eslint-plugin-testing-library` only against your test files:

```json5
// .eslintrc
{
	// 1) Here we have our usual config which applies to the whole project, so we don't put testing-library preset here.
	extends: ['airbnb', 'plugin:prettier/recommended'],

// 2) We load other plugins than eslint-plugin-testing-library globally if we want to.
	plugins: ['react-hooks'],

overrides: [
		{
			// 3) Now we enable eslint-plugin-testing-library rules or preset only for matching testing files!
			files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
			extends: ['plugin:testing-library/react'],
		},
	],
}
```

#### ESLint Cascading and Hierarchy

Another approach for customizing ESLint config by paths is through [ESLint Cascading and Hierarchy](https://eslint.org/docs/user-guide/configuring/configuration-files#cascading-and-hierarchy). This is useful if all your tests are placed under the same folder, so you can place there another `.eslintrc` where you enable `eslint-plugin-testing-library` for applying it only to the files under such folder, rather than enabling it on your global `.eslintrc` which would apply to your whole project.

## Shareable configurations

This plugin exports several recommended configurations that enforce good practices for specific Testing Library packages.
You can find more info about enabled rules in the [Supported Rules section](#supported-rules), under the `Configurations` column.

Since each one of these configurations is aimed at a particular Testing Library package, they are not extendable between them, so you should use only one of them at once per `.eslintrc` file. For example, if you want to enable recommended configuration for React, you don't need to combine it somehow with DOM one:

```json5
// ❌ Don't do this
{
	extends: ['plugin:testing-library/dom', 'plugin:testing-library/react'],
}
```

```json5
// ✅ Just do this instead
{
	extends: ['plugin:testing-library/react'],
}
```

### DOM Testing Library

Enforces recommended rules for DOM Testing Library.