fix(jsx-no-leaked-render): avoid reporting ternary with valid alternate

Author: Belco90

lib/rules/jsx-no-leaked-render.js

@@ -21,6 +21,7 @@ const COERCE_STRATEGY = 'coerce';
 const TERNARY_STRATEGY = 'ternary';
 const DEFAULT_VALID_STRATEGIES = [TERNARY_STRATEGY, COERCE_STRATEGY];
 const COERCE_VALID_LEFT_SIDE_EXPRESSIONS = ['UnaryExpression', 'BinaryExpression', 'CallExpression'];
+const TERNARY_INVALID_ALTERNATE_VALUES = [undefined, null, false];
 
 function trimLeftNode(node) {
   // Remove double unary expression (boolean coercion), so we avoid trimming valid negations
@@ -122,6 +123,11 @@ module.exports = {
           return;
         }
 
+        const isValidTernaryAlternate = TERNARY_INVALID_ALTERNATE_VALUES.indexOf(node.alternate.value) === -1;
+        if (isValidTernaryAlternate) {
+          return;
+        }
+
         report(context, messages.noPotentialLeakedRender, 'noPotentialLeakedRender', {
           node,
           fix(fixer) {

tests/lib/rules/jsx-no-leaked-render.js

@@ -124,6 +124,35 @@ 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>
+        }
+      `,
+    },
+    {
+      // It shouldn't delete valid alternate from ternary expressions when "coerce" is the only valid strategy - 2
+      options: [{ validStrategies: ['coerce'] }],
+      code: `
+        const Component = ({ containerName }) => {
+          return <div>{ containerName.length > 0 ? "Loading several stuff" : "Loading" }</div>
+        }
+      `,
+    },
+    {
+      // It shouldn't delete valid branches from ternary expressions when ["coerce", "ternary"] are only valid strategies
+      options: [{ validStrategies: ['coerce', 'ternary'] }],
+      code: `
+        const Component = ({ elements, count }) => {
+          return <div>{direction ? (direction === "down" ? "▼" : "▲") : ""}</div>
+        }
+      `,
+    },
   ]),
 
   invalid: parsers.all([