fix(prefer-in-documment): make toHaveLength(1) with AllBy queries valid

Author: SevenOutman

src/__tests__/lib/rules/prefer-in-document.js

@@ -97,6 +97,23 @@ const valid = [
   `
   const element =  getByText('value')
   expect(element).toBeInTheDocument`,
+
+  // *AllBy queries with `.toHaveLength(1)` is valid
+  // see conclusion at https://github.com/testing-library/eslint-plugin-jest-dom/issues/171#issuecomment-895074086
+  `expect(screen.getAllByRole('foo')).toHaveLength(1)`,
+  `expect(await screen.findAllByRole('foo')).toHaveLength(1)`,
+  `expect(getAllByRole('foo')).toHaveLength(1)`,
+  `expect(wrapper.getAllByRole('foo')).toHaveLength(1)`,
+  `const foo = screen.getAllByRole('foo');
+    expect(foo).toHaveLength(1);`,
+  `const foo = getAllByRole('foo');
+    expect(foo).toHaveLength(1);`,
+  `let foo;
+    foo = getAllByRole('foo');
+    expect(foo).toHaveLength(1);`,
+  `let foo;
+    foo = screen.getAllByRole('foo');
+    expect(foo).toHaveLength(1);`,
 ];
 const invalid = [
   invalidCase(
@@ -150,51 +167,6 @@ const invalid = [
     foo = screen.getByText('foo');
     expect(foo).toBeInTheDocument();`
   ),
-  invalidCase(
-    `expect(screen.getAllByRole('foo')).toHaveLength(1)`,
-    `expect(screen.getByRole('foo')).toBeInTheDocument()`
-  ),
-  invalidCase(
-    `expect(await screen.findAllByRole('foo')).toHaveLength(1)`,
-    `expect(await screen.findByRole('foo')).toBeInTheDocument()`
-  ),
-  invalidCase(
-    `expect(getAllByRole('foo')).toHaveLength(1)`,
-    `expect(getByRole('foo')).toBeInTheDocument()`
-  ),
-  invalidCase(
-    `expect(wrapper.getAllByRole('foo')).toHaveLength(1)`,
-    `expect(wrapper.getByRole('foo')).toBeInTheDocument()`
-  ),
-  invalidCase(
-    `const foo = screen.getAllByRole('foo');
-    expect(foo).toHaveLength(1);`,
-    `const foo = screen.getByRole('foo');
-    expect(foo).toBeInTheDocument();`
-  ),
-  invalidCase(
-    `const foo = getAllByRole('foo');
-    expect(foo).toHaveLength(1);`,
-    `const foo = getByRole('foo');
-    expect(foo).toBeInTheDocument();`
-  ),
-  invalidCase(
-    `let foo;
-    foo = getAllByRole('foo');
-    expect(foo).toHaveLength(1);`,
-    `let foo;
-    foo = getByRole('foo');
-    expect(foo).toBeInTheDocument();`
-  ),
-  invalidCase(
-    `let foo;
-    foo = screen.getAllByRole('foo');
-    expect(foo).toHaveLength(1);`,
-    `let foo;
-    foo = screen.getByRole('foo');
-    expect(foo).toBeInTheDocument();`
-  ),
-
   invalidCase(
     `expect(screen.getByText('foo')).toHaveLength(1)`,
     `expect(screen.getByText('foo')).toBeInTheDocument()`
@@ -461,12 +433,6 @@ const invalid = [
      span = getByText('foo') as HTMLSpanElement
   expect(span).toBeInTheDocument()`
   ),
-  invalidCase(
-    `const things = screen.getAllByText("foo");
-  expect(things).toHaveLength(1);`,
-    `const things = screen.getByText("foo");
-  expect(things).toBeInTheDocument();`
-  ),
 ];
 
 const ruleTester = new RuleTester({

src/rules/prefer-in-document.js

@@ -43,6 +43,24 @@ function usesToHaveLengthZero(matcherNode, matcherArguments) {
   return matcherNode.name === "toHaveLength" && matcherArguments[0].value === 0;
 }
 
+/**
+ * Extract the DTL query identifier from a call expression
+ *
+ * <query>() -> <query>
+ * screen.<query>() -> <query>
+ */
+function getDTLQueryIdentifierNode(callExpressionNode) {
+  if (!callExpressionNode || callExpressionNode.type !== "CallExpression") {
+    return;
+  }
+
+  if (callExpressionNode.callee.type === "Identifier") {
+    return callExpressionNode.callee;
+  }
+
+  return callExpressionNode.callee.property;
+}
+
 export const create = (context) => {
   const alternativeMatchers =
     /^(toHaveLength|toBeDefined|toBeNull|toBe|toEqual|toBeTruthy|toBeFalsy)$/;
@@ -84,7 +102,12 @@ export const create = (context) => {
       // isNotToHaveLengthZero represents .not.toHaveLength(0) which is a valid use of toHaveLength
       const isNotToHaveLengthZero =
         usesToHaveLengthZero(matcherNode, matcherArguments) && negatedMatcher;
+
       const isValidUseOfToHaveLength =
+        // .toHaveLength(1) is valid when used with *AllBy* queries
+        // meaning checking for exactly one match
+        // see discussion https://github.com/testing-library/eslint-plugin-jest-dom/issues/171
+        (lengthValue === 1 && /AllBy/.test(queryNode.name)) ||
         isNotToHaveLengthZero ||
         !["Literal", "Identifier"].includes(matcherArguments[0].type) ||
         lengthValue === undefined ||
@@ -184,6 +207,12 @@ export const create = (context) => {
         context,
         node.object.object.arguments[0].name
       );
+
+      // Not an RTL query
+      if (!queryNode || queryNode.type !== "CallExpression") {
+        return;
+      }
+
       const matcherNode = node.property;
 
       const matcherArguments = node.parent.arguments;
@@ -201,16 +230,25 @@ export const create = (context) => {
     [`MemberExpression[object.callee.name=expect][property.name=${alternativeMatchers}][object.arguments.0.type=Identifier]`](
       node
     ) {
-      const queryNode = getAssignmentForIdentifier(
+      // Value expression being assigned to the left-hand value
+      const rightValueNode = getAssignmentForIdentifier(
         context,
         node.object.arguments[0].name
       );
+
+      // Not a DTL query
+      if (!rightValueNode || rightValueNode.type !== "CallExpression") {
+        return;
+      }
+
+      const queryIdentifierNode = getDTLQueryIdentifierNode(rightValueNode);
+
       const matcherNode = node.property;
 
       const matcherArguments = node.parent.arguments;
       check({
         negatedMatcher: false,
-        queryNode: (queryNode && queryNode.callee) || queryNode,
+        queryNode: queryIdentifierNode,
         matcherNode,
         matcherArguments,
       });
@@ -226,14 +264,17 @@ export const create = (context) => {
         return;
       }
 
-      const queryNode =
-        arg.type === "AwaitExpression" ? arg.argument.callee : arg.callee;
+      const queryIdentifierNode =
+        arg.type === "AwaitExpression"
+          ? getDTLQueryIdentifierNode(arg.argument)
+          : getDTLQueryIdentifierNode(arg);
+
       const matcherNode = node.callee.property;
       const matcherArguments = node.arguments;
 
       check({
         negatedMatcher: false,
-        queryNode,
+        queryNode: queryIdentifierNode,
         matcherNode,
         matcherArguments,
       });