feat: new detection helpers for findBy queries

Author: Belco90

lib/detect-testing-library-utils.ts

@@ -50,7 +50,9 @@ export type DetectionHelpers = {
   isValidFilename: () => boolean;
   isGetByQuery: (node: TSESTree.Identifier) => boolean;
   isQueryByQuery: (node: TSESTree.Identifier) => boolean;
+  isFindByQuery: (node: TSESTree.Identifier) => boolean;
   isSyncQuery: (node: TSESTree.Identifier) => boolean;
+  isAsyncQuery: (node: TSESTree.Identifier) => boolean;
   isPresenceAssert: (node: TSESTree.MemberExpression) => boolean;
   isAbsenceAssert: (node: TSESTree.MemberExpression) => boolean;
   canReportErrors: () => boolean;
@@ -145,13 +147,27 @@ export function detectTestingLibraryUtils<
       return !!node.name.match(/^query(All)?By.+$/);
     };
 
+    /**
+     * Determines whether a given node is `findBy*` or `findAllBy*` query variant or not.
+     */
+    const isFindByQuery: DetectionHelpers['isFindByQuery'] = (node) => {
+      return !!node.name.match(/^find(All)?By.+$/);
+    };
+
     /**
      * Determines whether a given node is sync query or not.
      */
     const isSyncQuery: DetectionHelpers['isSyncQuery'] = (node) => {
       return isGetByQuery(node) || isQueryByQuery(node);
     };
 
+    /**
+     * Determines whether a given node is async query or not.
+     */
+    const isAsyncQuery: DetectionHelpers['isAsyncQuery'] = (node) => {
+      return isFindByQuery(node);
+    };
+
     /**
      * Determines whether a given MemberExpression node is a presence assert
      *
@@ -293,7 +309,9 @@ export function detectTestingLibraryUtils<
       isValidFilename,
       isGetByQuery,
       isQueryByQuery,
+      isFindByQuery,
       isSyncQuery,
+      isAsyncQuery,
       isPresenceAssert,
       isAbsenceAssert,
       canReportErrors,

tests/create-testing-library-rule.test.ts

@@ -147,6 +147,12 @@ ruleTester.run(RULE_NAME, rule, {
       querySomeElement('button')
     `,
     },
+    {
+      code: `
+      // case: custom method not matching "findBy*" variant pattern
+      findSomeElement('button')
+    `,
+    },
     {
       settings: {
         'testing-library/module': 'test-utils',
@@ -167,6 +173,16 @@ ruleTester.run(RULE_NAME, rule, {
       queryByRole('button')
     `,
     },
+    {
+      settings: {
+        'testing-library/module': 'test-utils',
+      },
+      code: `
+      // case: built-in "findBy*" query not reported because custom module not imported
+      import { render } from 'other-module'
+      findByRole('button')
+    `,
+    },
     {
       settings: {
         'testing-library/filename-pattern': 'testing-library\\.js',
@@ -185,6 +201,15 @@ ruleTester.run(RULE_NAME, rule, {
       queryByRole('button')
     `,
     },
+    {
+      settings: {
+        'testing-library/filename-pattern': 'testing-library\\.js',
+      },
+      code: `
+      // case: built-in "findBy*" query not reported because custom filename doesn't match
+      findByRole('button')
+    `,
+    },
     {
       settings: {
         'testing-library/module': 'test-utils',
@@ -430,6 +455,13 @@ ruleTester.run(RULE_NAME, rule, {
     `,
       errors: [{ line: 3, column: 7, messageId: 'queryByError' }],
     },
+    {
+      code: `
+      // case: built-in "findBy*" query reported without import (aggressive reporting)
+      findByRole('button')
+    `,
+      errors: [{ line: 3, column: 7, messageId: 'findByError' }],
+    },
     {
       filename: 'MyComponent.spec.js',
       code: `
@@ -445,6 +477,13 @@ ruleTester.run(RULE_NAME, rule, {
     `,
       errors: [{ line: 3, column: 7, messageId: 'queryByError' }],
     },
+    {
+      code: `
+      // case: custom "findBy*" query reported without import (aggressive reporting)
+      findByIcon('search')
+    `,
+      errors: [{ line: 3, column: 7, messageId: 'findByError' }],
+    },
     {
       settings: {
         'testing-library/module': 'test-utils',
@@ -458,13 +497,28 @@ ruleTester.run(RULE_NAME, rule, {
     },
     {
       filename: 'MyComponent.spec.js',
+      settings: {
+        'testing-library/module': 'test-utils',
+      },
       code: `
       // case: built-in "queryBy*" query reported with custom module + Testing Library package import
-      import { render } from '@testing-library/framework'
+      import { render } from '@testing-library/react'
       queryByRole('button')
     `,
       errors: [{ line: 4, column: 7, messageId: 'queryByError' }],
     },
+    {
+      filename: 'MyComponent.spec.js',
+      settings: {
+        'testing-library/module': 'test-utils',
+      },
+      code: `
+      // case: built-in "findBy*" query reported with custom module + Testing Library package import
+      import { render } from '@testing-library/react'
+      findByRole('button')
+    `,
+      errors: [{ line: 4, column: 7, messageId: 'findByError' }],
+    },
     {
       settings: {
         'testing-library/module': 'test-utils',
@@ -478,13 +532,28 @@ ruleTester.run(RULE_NAME, rule, {
     },
     {
       filename: 'MyComponent.spec.js',
+      settings: {
+        'testing-library/module': 'test-utils',
+      },
       code: `
       // case: built-in "queryBy*" query reported with custom module + custom module import
       import { render } from 'test-utils'
       queryByRole('button')
     `,
       errors: [{ line: 4, column: 7, messageId: 'queryByError' }],
     },
+    {
+      filename: 'MyComponent.spec.js',
+      settings: {
+        'testing-library/module': 'test-utils',
+      },
+      code: `
+      // case: built-in "queryBy*" query reported with custom module + custom module import
+      import { render } from 'test-utils'
+      findByRole('button')
+    `,
+      errors: [{ line: 4, column: 7, messageId: 'findByError' }],
+    },
 
     {
       settings: {
@@ -499,13 +568,28 @@ ruleTester.run(RULE_NAME, rule, {
     },
     {
       filename: 'MyComponent.spec.js',
+      settings: {
+        'testing-library/module': 'test-utils',
+      },
       code: `
       // case: custom "queryBy*" query reported with custom module + Testing Library package import
       import { render } from '@testing-library/framework'
       queryByIcon('search')
     `,
       errors: [{ line: 4, column: 7, messageId: 'queryByError' }],
     },
+    {
+      filename: 'MyComponent.spec.js',
+      settings: {
+        'testing-library/module': 'test-utils',
+      },
+      code: `
+      // case: custom "findBy*" query reported with custom module + Testing Library package import
+      import { render } from '@testing-library/framework'
+      findByIcon('search')
+    `,
+      errors: [{ line: 4, column: 7, messageId: 'findByError' }],
+    },
     {
       settings: {
         'testing-library/module': 'test-utils',
@@ -519,13 +603,28 @@ ruleTester.run(RULE_NAME, rule, {
     },
     {
       filename: 'MyComponent.spec.js',
+      settings: {
+        'testing-library/module': 'test-utils',
+      },
       code: `
       // case: custom "queryBy*" query reported with custom module + custom module import
       import { render } from 'test-utils'
       queryByIcon('search')
     `,
       errors: [{ line: 4, column: 7, messageId: 'queryByError' }],
     },
+    {
+      filename: 'MyComponent.spec.js',
+      settings: {
+        'testing-library/module': 'test-utils',
+      },
+      code: `
+      // case: custom "findBy*" query reported with custom module + custom module import
+      import { render } from 'test-utils'
+      findByIcon('search')
+    `,
+      errors: [{ line: 4, column: 7, messageId: 'findByError' }],
+    },
     {
       settings: {
         'testing-library/module': 'test-utils',

tests/fake-rule.ts

@@ -11,6 +11,7 @@ type MessageIds =
   | 'fakeError'
   | 'getByError'
   | 'queryByError'
+  | 'findByError'
   | 'presenceAssertError'
   | 'absenceAssertError';
 
@@ -27,6 +28,7 @@ export default createTestingLibraryRule<Options, MessageIds>({
       fakeError: 'fake error reported',
       getByError: 'some error related to getBy reported',
       queryByError: 'some error related to queryBy reported',
+      findByError: 'some error related to findBy reported',
       presenceAssertError: 'some error related to presence assert reported',
       absenceAssertError: 'some error related to absence assert reported',
     },
@@ -49,6 +51,10 @@ export default createTestingLibraryRule<Options, MessageIds>({
       if (helpers.isQueryByQuery(node)) {
         return context.report({ node, messageId: 'queryByError' });
       }
+
+      if (helpers.isFindByQuery(node)) {
+        return context.report({ node, messageId: 'findByError' });
+      }
     };
 
     const reportMemberExpression = (node: TSESTree.MemberExpression) => {