feat(no-promise-in-fire-event): add new no-promise-in-fire-event rule

Author: timdeschryver

docs/rules/no-promise-in-fire-event.md

@@ -0,0 +1,31 @@
+# Disallow the use of promises passed to a `fireEvent` method (no-promise-in-fire-event)
+
+The `fireEvent` method expects that a DOM element is passed.
+
+Examples of **incorrect** code for this rule:
+
+```js
+import { screen, fireEvent } from '@testing-library/react';
+
+// usage of findBy queries
+fireEvent.click(screen.findByRole('button'));
+
+// usage of promises
+fireEvent.click(new Promise(jest.fn())
+```
+
+Examples of **correct** code for this rule:
+
+```js
+import { screen, fireEvent } from '@testing-library/react';
+
+// use getBy queries
+fireEvent.click(screen.getByRole('button'));
+
+// use awaited findBy queries
+fireEvent.click(await screen.findByRole('button'));
+```
+
+## Further Reading
+
+- [A Github Issue explaining the problem](https://github.com/testing-library/dom-testing-library/issues/609)

lib/index.ts

@@ -7,6 +7,7 @@ import noDebug from './rules/no-debug';
 import noDomImport from './rules/no-dom-import';
 import noManualCleanup from './rules/no-manual-cleanup';
 import noWaitForEmptyCallback from './rules/no-wait-for-empty-callback';
+import noPromiseInFireEvent from './rules/no-promise-in-fire-event';
 import preferExplicitAssert from './rules/prefer-explicit-assert';
 import preferPresenceQueries from './rules/prefer-presence-queries';
 import preferScreenQueries from './rules/prefer-screen-queries';
@@ -22,6 +23,7 @@ const rules = {
   'no-debug': noDebug,
   'no-dom-import': noDomImport,
   'no-manual-cleanup': noManualCleanup,
+  'no-promise-in-fire-event': noPromiseInFireEvent,
   'no-wait-for-empty-callback': noWaitForEmptyCallback,
   'prefer-explicit-assert': preferExplicitAssert,
   'prefer-find-by': preferFindBy,

lib/node-utils.ts

@@ -12,6 +12,12 @@ export function isAwaitExpression(
   return node && node.type === 'AwaitExpression';
 }
 
+export function isNewExpression(
+  node: TSESTree.Node
+): node is TSESTree.NewExpression {
+  return node && node.type === 'NewExpression';
+}
+
 export function isIdentifier(node: TSESTree.Node): node is TSESTree.Identifier {
   return node && node.type === 'Identifier';
 }
@@ -103,6 +109,8 @@ export function hasThenProperty(node: TSESTree.Node) {
   );
 }
 
-export function isArrowFunctionExpression(node: TSESTree.Node): node is TSESTree.ArrowFunctionExpression {
-  return node && node.type === 'ArrowFunctionExpression'
-}
+export function isArrowFunctionExpression(
+  node: TSESTree.Node
+): node is TSESTree.ArrowFunctionExpression {
+  return node && node.type === 'ArrowFunctionExpression';
+}

lib/rules/no-promise-in-fire-event.ts

@@ -0,0 +1,83 @@
+import { TSESTree, ESLintUtils } from '@typescript-eslint/experimental-utils';
+import { getDocsUrl, ASYNC_QUERIES_VARIANTS } from '../utils';
+import {
+  isNewExpression,
+  isIdentifier,
+  isMemberExpression,
+  isImportSpecifier,
+  isCallExpression,
+} from '../node-utils';
+
+export const RULE_NAME = 'no-promise-in-fire-event';
+export type MessageIds = 'noPromiseInFireEvent';
+type Options = [];
+
+export default ESLintUtils.RuleCreator(getDocsUrl)<Options, MessageIds>({
+  name: RULE_NAME,
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow the use of promises passed to a `fireEvent` method',
+      category: 'Best Practices',
+      recommended: false,
+    },
+    messages: {
+      noPromiseInFireEvent:
+        "A promise shouldn't be passed to a `fireEvent` method, instead pass the DOM element",
+    },
+    fixable: 'code',
+    schema: [],
+  },
+  defaultOptions: [],
+
+  create(context) {
+    return {
+      'ImportDeclaration[source.value=/testing-library/]'(
+        node: TSESTree.ImportDeclaration
+      ) {
+        const fireEventImportNode = node.specifiers.find(
+          specifier =>
+            isImportSpecifier(specifier) &&
+            specifier.imported &&
+            'fireEvent' === specifier.imported.name
+        ) as TSESTree.ImportSpecifier;
+
+        const { references } = context.getDeclaredVariables(
+          fireEventImportNode
+        )[0];
+
+        for (const reference of references) {
+          const referenceNode = reference.identifier;
+          if (
+            isMemberExpression(referenceNode.parent) &&
+            isCallExpression(referenceNode.parent.parent)
+          ) {
+            const [element] = referenceNode.parent.parent
+              .arguments as TSESTree.Node[];
+            if (element) {
+              if (isCallExpression(element) || isNewExpression(element)) {
+                const methodName = isIdentifier(element.callee)
+                  ? element.callee.name
+                  : isMemberExpression(element.callee) &&
+                    isIdentifier(element.callee.property)
+                  ? element.callee.property.name
+                  : '';
+
+                if (
+                  ASYNC_QUERIES_VARIANTS.some(q => methodName.startsWith(q)) ||
+                  methodName === 'Promise'
+                ) {
+                  context.report({
+                    node: element,
+                    messageId: 'noPromiseInFireEvent',
+                  });
+                }
+              }
+            }
+          }
+        }
+      },
+    };
+  },
+});

tests/lib/rules/no-promise-in-fire-event.test.ts

@@ -0,0 +1,93 @@
+import { createRuleTester } from '../test-utils';
+import rule, { RULE_NAME } from '../../../lib/rules/no-promise-in-fire-event';
+
+const ruleTester = createRuleTester();
+
+ruleTester.run(RULE_NAME, rule, {
+  valid: [
+    {
+      code: `
+        import {fireEvent} from '@testing-library/foo';
+        
+        fireEvent.click(screen.getByRole('button'))
+      `,
+    },
+    {
+      code: `
+        import {fireEvent} from '@testing-library/foo';
+
+        fireEvent.click(queryByRole('button'))`,
+    },
+    {
+      code: `
+        import {fireEvent} from '@testing-library/foo';
+
+        fireEvent.click(someRef)`,
+    },
+    {
+      code: `fireEvent.click(findByText('submit'))`,
+    },
+    {
+      code: `
+        import {fireEvent} from '@testing-library/foo';
+
+        fireEvent.click(promise)`,
+    },
+    {
+      code: `
+        import {fireEvent} from '@testing-library/foo';
+        
+        fireEvent.click(await screen.findByRole('button'))
+      `,
+    },
+    {
+      code: `fireEvent.click(Promise())`,
+    },
+  ],
+  invalid: [
+    {
+      code: `
+        import {fireEvent} from '@testing-library/foo';
+
+        fireEvent.click(screen.findByRole('button'))`,
+      errors: [
+        {
+          messageId: 'noPromiseInFireEvent',
+        },
+      ],
+    },
+    {
+      code: `
+        import {fireEvent} from '@testing-library/foo';
+
+        fireEvent.click(findByText('submit'))`,
+      errors: [
+        {
+          messageId: 'noPromiseInFireEvent',
+        },
+      ],
+    },
+    {
+      code: `
+        import {fireEvent} from '@testing-library/foo';
+
+        fireEvent.click(Promise('foo'))`,
+      errors: [
+        {
+          messageId: 'noPromiseInFireEvent',
+        },
+      ],
+    },
+    {
+      code: `
+        import {fireEvent} from '@testing-library/foo';
+
+        fireEvent.click(new Promise('foo'))`,
+      errors: [
+        {
+          messageId: 'noPromiseInFireEvent',
+        },
+      ],
+    },
+  ],
+});