Merge pull request #471 from testing-library/alpha

v5.0.0

.github/workflows/pipeline.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Use Node
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
@@ -51,8 +51,8 @@ jobs:
 
     strategy:
       matrix:
-        node: [10.12, 10, '12.0', 12, 14, 16]
-        eslint: [7.5, 7]
+        node: [12.22.0, 12, 14.17.0, 14, '16.0', 16]
+        eslint: [7.5, 7, 8]
 
     steps:
       - name: Cancel Previous Runs
@@ -72,7 +72,9 @@ jobs:
           useLockFile: false
 
       - name: Install ESLint v${{ matrix.eslint }}
-        run: npm install --no-save eslint@${{ matrix.eslint }}
+        # force installation for now until we get ESLint and all plugins updated
+        # in dev dependencies
+        run: npm install --no-save --force eslint@${{ matrix.eslint }}
 
       - name: Run tests
         run: npm run test:ci
@@ -96,7 +98,7 @@ jobs:
       - name: Use Node
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1

CONTRIBUTING.md

@@ -44,7 +44,7 @@ If you ever need to update a snapshot, you can run `npm run test:update`
 
 Based on [ESLint's Rule Naming Conventions](https://eslint.org/docs/developer-guide/working-with-rules#rule-naming-conventions), you must follow these rules:
 
-- If your rule is disallowing something, prefix it with `no-` such as `no-debug`
+- If your rule is disallowing something, prefix it with `no-` such as `no-debugging-utils`
   for disallowing `debug()`.
 - If your rule is suggesting to prefer a way of doing something, among other ways, you can **optionally** prefix it with
   `prefer-`. For example, `prefer-screen-queries` suggests to use `screen.getByText()` from imported `screen` rather
@@ -57,11 +57,11 @@ Based on [ESLint's Rule Naming Conventions](https://eslint.org/docs/developer-gu
 ## Adding new rules
 
 In the [same way as ESLint](https://eslint.org/docs/developer-guide/working-with-rules),
-each rule has three files named with its identifier (e.g. `no-debug`):
+each rule has three files named with its identifier (e.g. `no-debugging-utils`):
 
-- in the `lib/rules` directory: a source file (e.g. `no-debug.ts`)
-- in the `tests/lib/rules` directory: a test file (e.g. `no-debug.ts`)
-- in the `docs/rules` directory: a Markdown documentation file (e.g. `no-debug.md`)
+- in the `lib/rules` directory: a source file (e.g. `no-debugging-utils.ts`)
+- in the `tests/lib/rules` directory: a test file (e.g. `no-debugging-utils.ts`)
+- in the `docs/rules` directory: a Markdown documentation file (e.g. `no-debugging-utils.md`)
 
 Additionally, you need to do a couple of extra things:
 

README.md

@@ -50,6 +50,7 @@ $ yarn add --dev eslint-plugin-testing-library
 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
 
@@ -68,7 +69,7 @@ Then configure the rules you want to use within `rules` property of your `.eslin
   "rules": {
     "testing-library/await-async-query": "error",
     "testing-library/no-await-sync-query": "error",
-    "testing-library/no-debug": "warn",
+    "testing-library/no-debugging-utils": "warn",
     "testing-library/no-dom-import": "off"
   }
 }
@@ -195,21 +196,21 @@ To enable this configuration use the `extends` property in your
 | [`testing-library/no-await-sync-events`](./docs/rules/no-await-sync-events.md)                       | Disallow unnecessary `await` for sync events                                                 |     |                                                                   |
 | [`testing-library/no-await-sync-query`](./docs/rules/no-await-sync-query.md)                         | Disallow unnecessary `await` for sync queries                                                |     | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |
 | [`testing-library/no-container`](./docs/rules/no-container.md)                                       | Disallow the use of `container` methods                                                      |     | ![angular-badge][] ![react-badge][] ![vue-badge][]                |
-| [`testing-library/no-debug`](./docs/rules/no-debug.md)                                               | Disallow the use of debugging utilities like `debug`                                         |     | ![angular-badge][] ![react-badge][] ![vue-badge][]                |
+| [`testing-library/no-debugging-utils`](./docs/rules/no-debugging-utils.md)                           | Disallow the use of debugging utilities like `debug`                                         |     | ![angular-badge][] ![react-badge][] ![vue-badge][]                |
 | [`testing-library/no-dom-import`](./docs/rules/no-dom-import.md)                                     | Disallow importing from DOM Testing Library                                                  | 🔧  | ![angular-badge][] ![react-badge][] ![vue-badge][]                |
 | [`testing-library/no-manual-cleanup`](./docs/rules/no-manual-cleanup.md)                             | Disallow the use of `cleanup`                                                                |     |                                                                   |
 | [`testing-library/no-node-access`](./docs/rules/no-node-access.md)                                   | Disallow direct Node access                                                                  |     | ![angular-badge][] ![react-badge][] ![vue-badge][]                |
 | [`testing-library/no-promise-in-fire-event`](./docs/rules/no-promise-in-fire-event.md)               | Disallow the use of promises passed to a `fireEvent` method                                  |     | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |
-| [`testing-library/no-render-in-setup`](./docs/rules/no-render-in-setup.md)                           | Disallow the use of `render` in testing frameworks setup functions                           |     |                                                                   |
-| [`testing-library/no-unnecessary-act`](./docs/rules/no-unnecessary-act.md)                           | Disallow wrapping Testing Library utils or empty callbacks in `act`                          |     |                                                                   |
+| [`testing-library/no-render-in-setup`](./docs/rules/no-render-in-setup.md)                           | Disallow the use of `render` in testing frameworks setup functions                           |     | ![angular-badge][] ![react-badge][] ![vue-badge][]                |
+| [`testing-library/no-unnecessary-act`](./docs/rules/no-unnecessary-act.md)                           | Disallow wrapping Testing Library utils or empty callbacks in `act`                          |     | ![react-badge][]                                                  |
 | [`testing-library/no-wait-for-empty-callback`](./docs/rules/no-wait-for-empty-callback.md)           | Disallow empty callbacks for `waitFor` and `waitForElementToBeRemoved`                       |     | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |
-| [`testing-library/no-wait-for-multiple-assertions`](./docs/rules/no-wait-for-multiple-assertions.md) | Disallow the use of multiple `expect` calls inside `waitFor`                                 |     |                                                                   |
-| [`testing-library/no-wait-for-side-effects`](./docs/rules/no-wait-for-side-effects.md)               | Disallow the use of side effects in `waitFor`                                                |     |                                                                   |
-| [`testing-library/no-wait-for-snapshot`](./docs/rules/no-wait-for-snapshot.md)                       | Ensures no snapshot is generated inside of a `waitFor` call                                  |     |                                                                   |
+| [`testing-library/no-wait-for-multiple-assertions`](./docs/rules/no-wait-for-multiple-assertions.md) | Disallow the use of multiple `expect` calls inside `waitFor`                                 |     | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |
+| [`testing-library/no-wait-for-side-effects`](./docs/rules/no-wait-for-side-effects.md)               | Disallow the use of side effects in `waitFor`                                                |     | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |
+| [`testing-library/no-wait-for-snapshot`](./docs/rules/no-wait-for-snapshot.md)                       | Ensures no snapshot is generated inside of a `waitFor` call                                  |     | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |
 | [`testing-library/prefer-explicit-assert`](./docs/rules/prefer-explicit-assert.md)                   | Suggest using explicit assertions rather than standalone queries                             |     |                                                                   |
 | [`testing-library/prefer-find-by`](./docs/rules/prefer-find-by.md)                                   | Suggest using `find(All)By*` query instead of `waitFor` + `get(All)By*` to wait for elements | 🔧  | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |
-| [`testing-library/prefer-presence-queries`](./docs/rules/prefer-presence-queries.md)                 | Ensure appropriate `get*`/`query*` queries are used with their respective matchers           |     |                                                                   |
-| [`testing-library/prefer-query-by-disappearance`](./docs/rules/prefer-query-by-disappearance.md)     | Suggest using `queryBy*` queries when waiting for disappearance                              |     |                                                                   |
+| [`testing-library/prefer-presence-queries`](./docs/rules/prefer-presence-queries.md)                 | Ensure appropriate `get*`/`query*` queries are used with their respective matchers           |     | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |
+| [`testing-library/prefer-query-by-disappearance`](./docs/rules/prefer-query-by-disappearance.md)     | Suggest using `queryBy*` queries when waiting for disappearance                              |     | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |
 | [`testing-library/prefer-screen-queries`](./docs/rules/prefer-screen-queries.md)                     | Suggest using `screen` while querying                                                        |     | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |
 | [`testing-library/prefer-user-event`](./docs/rules/prefer-user-event.md)                             | Suggest using `userEvent` over `fireEvent` for simulating user interactions                  |     |                                                                   |
 | [`testing-library/prefer-wait-for`](./docs/rules/prefer-wait-for.md)                                 | Use `waitFor` instead of deprecated wait methods                                             | 🔧  |                                                                   |

docs/migration-guides/v5.md

@@ -0,0 +1,25 @@
+# Guide: migrating to v5
+
+Assuming you are already in v4, migrating to v5 will be easy. If you are not in v4 yet, we recommend you to follow [the proper guide to migrate to it](docs/migration-guides/v4.md).
+
+## Overview
+
+- Support for ESLint v8
+- Drop support for Node v10. Required node version is now `^12.22.0 || ^14.17.0 || >=16.0.0`. Node v10 was EOL'd in April 2021, and ESLint v8 dropped support for it too.
+- Update dependencies
+- `no-debug` is now called `no-debugging-utils`
+- `no-render-in-setup` is now enabled by default in the Angular, React & Vue configs
+- `no-unnecessary-act`'s `isStrict` option is now `true` by default
+- `no-unnecessary-act` is now enabled by default in the React config
+- `no-wait-for-multiple-assertions` is now enabled by default in all configs
+- `no-wait-for-side-effects` is now enabled by default in all configs
+- `no-wait-for-snapshot` is now enabled by default in all configs
+- `prefer-presence-queries` is now enabled by default in all configs
+- `prefer-query-by-disappearance` is now enabled by default in all configs
+
+## Steps to upgrade
+
+- `eslint-plugin-testing-library` supports both ESLint v7 and v8, so you are fine with either version
+- Making sure you are using a compatible Node version (`^12.22.0 || ^14.17.0 || >=16.0.0`), and update it if it's not the case
+- Renaming `testing-library/no-debug` to `testing-library/no-debugging-utils` if you were referencing it manually somewhere
+- Being aware of new rules enabled in Shared Configs which can lead to new reported errors

docs/rules/no-debug.md → docs/rules/no-debugging-utils.md

@@ -1,4 +1,4 @@
-# Disallow the use of debugging utilities like `debug` (`testing-library/no-debug`)
+# Disallow the use of debugging utilities (`testing-library/no-debugging-utils`)
 
 Just like `console.log` statements pollutes the browser's output, debug statements also pollutes the tests if one of your teammates forgot to remove it. `debug` statements should be used when you actually want to debug your tests but should not be pushed to the codebase.
 
@@ -41,7 +41,7 @@ You can control which debugging utils are checked for with the `utilsToCheckFor`
 
 ```json
 {
-  "testing-library/no-debug": [
+  "testing-library/no-debugging-utils": [
     "error",
     {
       "utilsToCheckFor": {

lib/configs/angular.ts

@@ -9,12 +9,18 @@ export = {
     'testing-library/await-async-utils': 'error',
     'testing-library/no-await-sync-query': 'error',
     'testing-library/no-container': 'error',
-    'testing-library/no-debug': 'error',
+    'testing-library/no-debugging-utils': 'error',
     'testing-library/no-dom-import': ['error', 'angular'],
     'testing-library/no-node-access': 'error',
     'testing-library/no-promise-in-fire-event': 'error',
+    'testing-library/no-render-in-setup': 'error',
     'testing-library/no-wait-for-empty-callback': 'error',
+    'testing-library/no-wait-for-multiple-assertions': 'error',
+    'testing-library/no-wait-for-side-effects': 'error',
+    'testing-library/no-wait-for-snapshot': 'error',
     'testing-library/prefer-find-by': 'error',
+    'testing-library/prefer-presence-queries': 'error',
+    'testing-library/prefer-query-by-disappearance': 'error',
     'testing-library/prefer-screen-queries': 'error',
     'testing-library/render-result-naming-convention': 'error',
   },

lib/configs/dom.ts

@@ -10,7 +10,12 @@ export = {
     'testing-library/no-await-sync-query': 'error',
     'testing-library/no-promise-in-fire-event': 'error',
     'testing-library/no-wait-for-empty-callback': 'error',
+    'testing-library/no-wait-for-multiple-assertions': 'error',
+    'testing-library/no-wait-for-side-effects': 'error',
+    'testing-library/no-wait-for-snapshot': 'error',
     'testing-library/prefer-find-by': 'error',
+    'testing-library/prefer-presence-queries': 'error',
+    'testing-library/prefer-query-by-disappearance': 'error',
     'testing-library/prefer-screen-queries': 'error',
   },
 };

lib/configs/react.ts

@@ -9,12 +9,19 @@ export = {
     'testing-library/await-async-utils': 'error',
     'testing-library/no-await-sync-query': 'error',
     'testing-library/no-container': 'error',
-    'testing-library/no-debug': 'error',
+    'testing-library/no-debugging-utils': 'error',
     'testing-library/no-dom-import': ['error', 'react'],
     'testing-library/no-node-access': 'error',
     'testing-library/no-promise-in-fire-event': 'error',
+    'testing-library/no-render-in-setup': 'error',
+    'testing-library/no-unnecessary-act': 'error',
     'testing-library/no-wait-for-empty-callback': 'error',
+    'testing-library/no-wait-for-multiple-assertions': 'error',
+    'testing-library/no-wait-for-side-effects': 'error',
+    'testing-library/no-wait-for-snapshot': 'error',
     'testing-library/prefer-find-by': 'error',
+    'testing-library/prefer-presence-queries': 'error',
+    'testing-library/prefer-query-by-disappearance': 'error',
     'testing-library/prefer-screen-queries': 'error',
     'testing-library/render-result-naming-convention': 'error',
   },

lib/configs/vue.ts

@@ -10,12 +10,18 @@ export = {
     'testing-library/await-fire-event': 'error',
     'testing-library/no-await-sync-query': 'error',
     'testing-library/no-container': 'error',
-    'testing-library/no-debug': 'error',
+    'testing-library/no-debugging-utils': 'error',
     'testing-library/no-dom-import': ['error', 'vue'],
     'testing-library/no-node-access': 'error',
     'testing-library/no-promise-in-fire-event': 'error',
+    'testing-library/no-render-in-setup': 'error',
     'testing-library/no-wait-for-empty-callback': 'error',
+    'testing-library/no-wait-for-multiple-assertions': 'error',
+    'testing-library/no-wait-for-side-effects': 'error',
+    'testing-library/no-wait-for-snapshot': 'error',
     'testing-library/prefer-find-by': 'error',
+    'testing-library/prefer-presence-queries': 'error',
+    'testing-library/prefer-query-by-disappearance': 'error',
     'testing-library/prefer-screen-queries': 'error',
     'testing-library/render-result-naming-convention': 'error',
   },

lib/rules/await-async-query.ts

@@ -20,7 +20,6 @@ export default createTestingLibraryRule<Options, MessageIds>({
     type: 'problem',
     docs: {
       description: 'Enforce promises from async queries to be handled',
-      category: 'Best Practices',
       recommendedConfig: {
         dom: 'error',
         angular: 'error',

lib/rules/await-async-utils.ts

@@ -19,7 +19,6 @@ export default createTestingLibraryRule<Options, MessageIds>({
     type: 'problem',
     docs: {
       description: 'Enforce promises from async utils to be awaited properly',
-      category: 'Best Practices',
       recommendedConfig: {
         dom: 'error',
         angular: 'error',

lib/rules/await-fire-event.ts

@@ -19,7 +19,6 @@ export default createTestingLibraryRule<Options, MessageIds>({
     type: 'problem',
     docs: {
       description: 'Enforce promises from `fireEvent` methods to be handled',
-      category: 'Best Practices',
       recommendedConfig: {
         dom: false,
         angular: false,

lib/rules/consistent-data-testid.ts

@@ -18,7 +18,6 @@ export default createTestingLibraryRule<Options, MessageIds>({
     type: 'suggestion',
     docs: {
       description: 'Ensures consistent usage of `data-testid`',
-      category: 'Best Practices',
       recommendedConfig: {
         dom: false,
         angular: false,

lib/rules/no-await-sync-events.ts

@@ -21,7 +21,6 @@ export default createTestingLibraryRule<Options, MessageIds>({
     type: 'problem',
     docs: {
       description: 'Disallow unnecessary `await` for sync events',
-      category: 'Best Practices',
       recommendedConfig: {
         dom: false,
         angular: false,

lib/rules/no-await-sync-query.ts

@@ -13,7 +13,6 @@ export default createTestingLibraryRule<Options, MessageIds>({
     type: 'problem',
     docs: {
       description: 'Disallow unnecessary `await` for sync queries',
-      category: 'Best Practices',
       recommendedConfig: {
         dom: 'error',
         angular: 'error',

lib/rules/no-container.ts

@@ -20,7 +20,6 @@ export default createTestingLibraryRule<Options, MessageIds>({
     type: 'problem',
     docs: {
       description: 'Disallow the use of `container` methods',
-      category: 'Best Practices',
       recommendedConfig: {
         dom: false,
         angular: 'error',

lib/rules/no-debug.ts → lib/rules/no-debugging-utils.ts

@@ -21,7 +21,7 @@ type DebugUtilsToCheckFor = Partial<
   Record<typeof DEBUG_UTILS[number], boolean>
 >;
 
-export const RULE_NAME = 'no-debug';
+export const RULE_NAME = 'no-debugging-utils';
 export type MessageIds = 'noDebug';
 type Options = [{ utilsToCheckFor?: DebugUtilsToCheckFor }];
 
@@ -31,7 +31,6 @@ export default createTestingLibraryRule<Options, MessageIds>({
     type: 'problem',
     docs: {
       description: 'Disallow the use of debugging utilities like `debug`',
-      category: 'Best Practices',
       recommendedConfig: {
         dom: false,
         angular: 'error',