fix: hooks returned by factory functions not linted

packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js

@@ -206,7 +206,7 @@ const tests = {
       _use();
       _useState();
       use_hook();
-      // also valid because it's not matching the PascalCase namespace
+      // also valid because it's not matching the allow-listed namespaces
       jest.useFakeTimer()
     `,
     `
@@ -406,6 +406,28 @@ const tests = {
         const [myState, setMyState] = useState(null);
       }
     `,
+    {
+      code: `
+      // Valid because we can have a factory function that creates hooks
+
+      function createHooks() {
+        return {
+          foo: {
+            useQuery: () => {
+              data: 'foo.useQuery'
+            },
+          }
+        };
+      }
+      const myHooks = createHooks();
+
+      const MyComponent = () => {
+        const query = myHooks.foo.useQuery();
+
+        return <>{query.data}</>;
+      }
+      `,
+    },
   ],
   invalid: [
     {
@@ -449,7 +471,7 @@ const tests = {
     },
     {
       code: `
-        // This is a false positive (it's valid) that unfortunately 
+        // This is a false positive (it's valid) that unfortunately
         // we cannot avoid. Prefer to rename it to not start with "use"
         class Foo extends Component {
           render() {
@@ -956,6 +978,52 @@ const tests = {
       `,
       errors: [classError('useState')],
     },
+    {
+      code: `
+        function createHooks() {
+          return {
+            useFoo: () => {
+              data: 'foo.useQuery'
+            },
+          };
+        }
+        const hooks = createHooks();
+
+        const MyComponent = () => {
+          if (a) {
+            return;
+          }
+          const query = hooks.useFoo();
+
+          return <>{query.data}</>;
+        }
+      `,
+      errors: [conditionalError('hooks.useFoo', true)],
+    },
+    {
+      code: `
+        function createHooks() {
+          return {
+            foo: {
+              useQuery: () => {
+                data: 'foo.useQuery'
+              },
+            }
+          };
+        }
+        const hooks = createHooks();
+
+        const MyComponent = () => {
+          if (a) {
+            return;
+          }
+          const query = hooks.foo.useQuery();
+
+          return <>{query.data}</>;
+        }
+      `,
+      errors: [conditionalError('hooks.useFoo.useQuery')],
+    },
   ],
 };
 

packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

@@ -19,12 +19,22 @@ function isHookName(s) {
   return /^use[A-Z0-9].*$/.test(s);
 }
 
+/**
+ * Namespaces that are not considered hooks
+ */
+const nonHookNamespaces = ['jest'];
+
 /**
  * We consider hooks to be a hook name identifier or a member expression
  * containing a hook name.
  */
 
 function isHook(node) {
+  console.log('isHook', {
+    type: node.type,
+    name: node.name,
+    ishookName: isHookName(node.name),
+  });
   if (node.type === 'Identifier') {
     return isHookName(node.name);
   } else if (
@@ -33,8 +43,7 @@ function isHook(node) {
     isHook(node.property)
   ) {
     const obj = node.object;
-    const isPascalCaseNameSpace = /^[A-Z].*/;
-    return obj.type === 'Identifier' && isPascalCaseNameSpace.test(obj.name);
+    return obj.type === 'Identifier' && !nonHookNamespaces.includes(obj.name);
   } else {
     return false;
   }