fix(jsx-no-leaked-render): avoid reporting nested logical expressions

jsx-eslint · May 26, 2022 · cead83e · cead83e
1 parent 0020161
commit cead83e
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 12 deletions.
diff --git a/lib/rules/jsx-no-leaked-render.js b/lib/rules/jsx-no-leaked-render.js
@@ -32,6 +32,14 @@ function trimLeftNode(node) {
   return node;
 }
 
+function getIsCoerceValidNestedLogicalExpression(node) {
+  if (node.type === 'LogicalExpression') {
+    return getIsCoerceValidNestedLogicalExpression(node.left) && getIsCoerceValidNestedLogicalExpression(node.right);
+  }
+
+  return COERCE_VALID_LEFT_SIDE_EXPRESSIONS.some((validExpression) => validExpression === node.type);
+}
+
 function ruleFixer(context, fixStrategy, fixer, reportedNode, leftNode, rightNode) {
   const sourceCode = context.getSourceCode();
   const rightSideText = sourceCode.getText(rightNode);
@@ -103,11 +111,12 @@ module.exports = {
       'JSXExpressionContainer > LogicalExpression[operator="&&"]'(node) {
         const leftSide = node.left;
 
-        if (
-          validStrategies.has(COERCE_STRATEGY)
-          && COERCE_VALID_LEFT_SIDE_EXPRESSIONS.some((validExpression) => validExpression === leftSide.type)
-        ) {
-          return;
+        const isCoerceValidLeftSide = COERCE_VALID_LEFT_SIDE_EXPRESSIONS
+          .some((validExpression) => validExpression === leftSide.type);
+        if (validStrategies.has(COERCE_STRATEGY)) {
+          if (isCoerceValidLeftSide || getIsCoerceValidNestedLogicalExpression(leftSide)) {
+            return;
+          }
         }
 
         report(context, messages.noPotentialLeakedRender, 'noPotentialLeakedRender', {

diff --git a/tests/lib/rules/jsx-no-leaked-render.js b/tests/lib/rules/jsx-no-leaked-render.js
@@ -124,23 +124,27 @@ ruleTester.run('jsx-no-leaked-render', rule, {
         }
       `,
     },
-
-    // Fixes for // https://github.com/jsx-eslint/eslint-plugin-react/issues/3297
     {
-      // It shouldn't delete valid alternate from ternary expressions when "coerce" is the only valid strategy - 1
       options: [{ validStrategies: ['coerce'] }],
       code: `
         const Component = ({ elements, count }) => {
-          return <div>{direction ? (direction === "down" ? "▼" : "▲") : ""}</div>
+          return <div>{!!count && <List elements={elements}/>}</div>
         }
       `,
     },
+
+    // Fixes for // https://github.com/jsx-eslint/eslint-plugin-react/issues/3297
     {
-      // It shouldn't delete valid alternate from ternary expressions when "coerce" is the only valid strategy - 2
+      // It shouldn't delete valid alternate from ternary expressions when "coerce" is the only valid strategy
       options: [{ validStrategies: ['coerce'] }],
       code: `
-        const Component = ({ containerName }) => {
-          return <div>{ containerName.length > 0 ? "Loading several stuff" : "Loading" }</div>
+        const Component = ({ elements, count }) => {
+          return (
+            <div>
+              <div> {direction ? (direction === "down" ? "▼" : "▲") : ""} </div>
+              <div>{ containerName.length > 0 ? "Loading several stuff" : "Loading" }</div>
+            </div>
+          )
         }
       `,
     },
@@ -153,6 +157,21 @@ ruleTester.run('jsx-no-leaked-render', rule, {
         }
       `,
     },
+    {
+      // It shouldn't report nested logical expressions when "coerce" is the only valid strategy
+      options: [{ validStrategies: ['coerce'] }],
+      code: `
+        const Component = ({ direction }) => {
+          return (
+            <div>
+              <div>{!!direction && direction === "down" && "▼"}</div>
+              <div>{direction === "down" && !!direction && "▼"}</div>
+              <div>{direction === "down" || !!direction && "▼"}</div>
+            </div>
+          )
+        }
+      `,
+    },
   ]),
 
   invalid: parsers.all([