feat(rule): prefer expect queryBy

Author: emmenko

README.md

@@ -128,13 +128,14 @@ To enable this configuration use the `extends` property in your
 
 ## Supported Rules
 
-| Rule                                                     | Description                                    | Configurations                                                            | Fixable            |
-| -------------------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------- | ------------------ |
-| [await-async-query](docs/rules/await-async-query.md)     | Enforce async queries to have proper `await`   | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |                    |
-| [await-fire-event](docs/rules/await-fire-event.md)       | Enforce async fire event methods to be awaited | ![vue-badge][]                                                            |                    |
-| [no-await-sync-query](docs/rules/no-await-sync-query.md) | Disallow unnecessary `await` for sync queries  | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |                    |
-| [no-debug](docs/rules/no-debug.md)                       | Disallow the use of `debug`                    | ![angular-badge][] ![react-badge][] ![vue-badge][]                        |                    |
-| [no-dom-import](docs/rules/no-dom-import.md)             | Disallow importing from DOM Testing Library    | ![angular-badge][] ![react-badge][] ![vue-badge][]                        | ![fixable-badge][] |
+| Rule                                                           | Description                                    | Configurations                                                            | Fixable            |
+| -------------------------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------- | ------------------ |
+| [await-async-query](docs/rules/await-async-query.md)           | Enforce async queries to have proper `await`   | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |                    |
+| [await-fire-event](docs/rules/await-fire-event.md)             | Enforce async fire event methods to be awaited | ![vue-badge][]                                                            |                    |
+| [no-await-sync-query](docs/rules/no-await-sync-query.md)       | Disallow unnecessary `await` for sync queries  | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |                    |
+| [no-debug](docs/rules/no-debug.md)                             | Disallow the use of `debug`                    | ![angular-badge][] ![react-badge][] ![vue-badge][]                        |                    |
+| [no-dom-import](docs/rules/no-dom-import.md)                   | Disallow importing from DOM Testing Library    | ![angular-badge][] ![react-badge][] ![vue-badge][]                        | ![fixable-badge][] |
+| [prefer-expect-query-by](docs/rules/prefer-expect-query-by.md) | Disallow the use of `expect(getBy*)`           | ![angular-badge][] ![react-badge][] ![vue-badge][]                        | ![fixable-badge][] |
 
 [build-badge]: https://img.shields.io/travis/Belco90/eslint-plugin-testing-library?style=flat-square
 [build-url]: https://travis-ci.org/belco90/eslint-plugin-testing-library

docs/rules/prefer-expect-query-by.md

@@ -0,0 +1,33 @@
+# Disallow the use of `expect(getBy*)` (prefer-expect-query-by)
+
+The (DOM) Testing Library support two types of queries: `getBy*` and `queryBy*`. Using `getBy*` throws an error in case the element is not found. This is useful when using method like `waitForElement`, which are `async` functions that will wait for the element to be found until a certain timeout, after that the test will fail.
+However, when trying to assert if an element is not in the document, we can't use `getBy*` as the test will fail immediately. Instead it is recommended to use `queryBy*`, which does not throw and therefore we can assert that `expect(queryByText("Foo")).not.toBeInTheDocument()`.
+
+## Rule details
+
+This rule gives a notification whenever `expect(getBy*)` is used.
+
+This rule is enabled by default.
+
+### Default configuration
+
+The following patterns is considered erroneous:
+
+```js
+test('some test', () => {
+  expect(getByText('Foo')).not.toBeInTheDocument();
+});
+```
+
+The following pattern is considered non erroneous:
+
+```js
+test('some test', async () => {
+  expect(queryByText('Foo')).not.toBeInTheDocument();
+});
+```
+
+## Further Reading
+
+- [Appearance and Disappearance](https://testing-library.com/docs/guide-disappearance#asserting-elements-are-not-present)
+- [Testing Library queries cheatsheet](https://testing-library.com/docs/dom-testing-library/cheatsheet#queries)

lib/index.js

@@ -6,11 +6,13 @@ const rules = {
   'no-await-sync-query': require('./rules/no-await-sync-query'),
   'no-debug': require('./rules/no-debug'),
   'no-dom-import': require('./rules/no-dom-import'),
+  'prefer-expect-query-by': require('./rules/prefer-expect-query-by'),
 };
 
 const recommendedRules = {
   'testing-library/await-async-query': 'error',
   'testing-library/no-await-sync-query': 'error',
+  'testing-library/prefer-expect-query-by': 'error',
 };
 
 module.exports = {

lib/rules/prefer-expect-query-by.js

@@ -0,0 +1,99 @@
+'use strict';
+
+const { getDocsUrl } = require('../utils');
+
+const AST_NODE_TYPES = {
+  Identifier: 'Identifier',
+  MemberExpression: 'MemberExpression',
+};
+
+function isIdentifier(node) {
+  return node.type === AST_NODE_TYPES.Identifier;
+}
+
+function isMemberExpression(node) {
+  return node.type === AST_NODE_TYPES.MemberExpression;
+}
+
+function isUsingWrongQueries(node) {
+  return node.name.startsWith('getBy') || node.name.startsWith('getAllBy');
+}
+
+function isNotNullOrUndefined(input) {
+  return input != null;
+}
+
+function mapNodesForWrongGetByQuery(node) {
+  const nodeArguments = node.arguments;
+  return nodeArguments
+    .map(arg => {
+      if (!arg.callee) {
+        return null;
+      }
+      // Example: `expect(rendered.getBy*)`
+      if (isMemberExpression(arg.callee)) {
+        const node = arg.callee.property;
+        if (isIdentifier(node) && isUsingWrongQueries(node)) {
+          return node;
+        }
+        return null;
+      }
+
+      // Example: `expect(getBy*)`
+      if (isIdentifier(arg.callee) && isUsingWrongQueries(arg.callee)) {
+        return arg.callee;
+      }
+
+      return null;
+    })
+    .filter(isNotNullOrUndefined);
+}
+
+function hasExpectWithWrongGetByQuery(node) {
+  if (
+    node.callee &&
+    node.callee.type === AST_NODE_TYPES.Identifier &&
+    node.callee.name === 'expect' &&
+    node.arguments
+  ) {
+    const nodesGetBy = mapNodesForWrongGetByQuery(node);
+    return nodesGetBy.length > 0;
+  }
+  return false;
+}
+
+module.exports = {
+  meta: {
+    docs: {
+      category: 'Best Practices',
+      description: 'Disallow using getBy* queries in expect calls',
+      recommended: 'error',
+      url: getDocsUrl('prefer-expect-query-by'),
+    },
+    messages: {
+      expectQueryBy:
+        'Using `expect(getBy*)` is not recommended, use `expect(queryBy*)` instead.',
+    },
+    schema: [],
+    type: 'suggestion',
+    fixable: 'code',
+  },
+
+  create: context => ({
+    CallExpression(node) {
+      if (hasExpectWithWrongGetByQuery(node)) {
+        const nodesGetBy = mapNodesForWrongGetByQuery(node);
+        context.report({
+          node: node.callee,
+          messageId: 'expectQueryBy',
+          fix(fixer) {
+            return fixer.replaceText(
+              nodesGetBy[0],
+              nodesGetBy[0].name.replace(/^(get(All)?(.*))$/, 'query$2$3')
+            );
+          },
+        });
+      }
+    },
+  }),
+};

package-lock.json

@@ -13,6 +13,7 @@ Object {
       "error",
       "angular",
     ],
+    "testing-library/prefer-expect-query-by": "error",
   },
 }
 `;
@@ -30,6 +31,7 @@ Object {
       "error",
       "react",
     ],
+    "testing-library/prefer-expect-query-by": "error",
   },
 }
 `;
@@ -42,6 +44,7 @@ Object {
   "rules": Object {
     "testing-library/await-async-query": "error",
     "testing-library/no-await-sync-query": "error",
+    "testing-library/prefer-expect-query-by": "error",
   },
 }
 `;
@@ -60,6 +63,7 @@ Object {
       "error",
       "vue",
     ],
+    "testing-library/prefer-expect-query-by": "error",
   },
 }
 `;