Repository: yannickcr/eslint-plugin-react (js)

Issue:
react/jsx-no-literals rule shows warning with template strings
Hello,

i'm using eslint@4.10.0 and eslint-plugin-react@7.4.0. The linter shows a warning if a join a string with "template strings", but not if I join it with the + operator:

```
<div className={'test' + name} />
// No warning
```

```
<div className={`test ${name}`} />
// Strings not allowed in JSX files (react/jsx-no-literals)
```

Is this a known issue?

Best regards

Pull request:
Find string literals as a part of BinaryExpressions in jsx-no-literals
Fixes #1511

Patch:
diff --git a/lib/rules/jsx-no-literals.js b/lib/rules/jsx-no-literals.js
index 797f5fc5..52bef3d4 100644
--- a/lib/rules/jsx-no-literals.js
+++ b/lib/rules/jsx-no-literals.js
@@ -42,16 +42,24 @@ module.exports = {
       });
     }
 
+    function getParentIgnoringBinaryExpressions(node) {
+      let current = node;
+      while (current.parent.type === 'BinaryExpression') {
+        current = current.parent;
+      }
+      return current.parent;
+    }
+
     function getValidation(node) {
+      const parent = getParentIgnoringBinaryExpressions(node);
       const standard = !/^[\s]+$/.test(node.value) &&
           typeof node.value === 'string' &&
-          node.parent &&
-          node.parent.type.indexOf('JSX') !== -1 &&
-          node.parent.type !== 'JSXAttribute';
+          parent.type.indexOf('JSX') !== -1 &&
+          parent.type !== 'JSXAttribute';
       if (isNoStrings) {
         return standard;
       }
-      return standard && node.parent.type !== 'JSXExpressionContainer';
+      return standard && parent.type !== 'JSXExpressionContainer';
     }
 
     // --------------------------------------------------------------------------
@@ -67,7 +75,8 @@ module.exports = {
       },
 
       TemplateLiteral: function(node) {
-        if (isNoStrings && node.parent.type === 'JSXExpressionContainer') {
+        const parent = getParentIgnoringBinaryExpressions(node);
+        if (isNoStrings && parent.type === 'JSXExpressionContainer') {
           reportLiteralNode(node);
         }
       }


Test patch:
diff --git a/tests/lib/rules/jsx-no-literals.js b/tests/lib/rules/jsx-no-literals.js
index 5fc70fec..ac77c437 100644
--- a/tests/lib/rules/jsx-no-literals.js
+++ b/tests/lib/rules/jsx-no-literals.js
@@ -286,6 +286,14 @@ ruleTester.run('jsx-no-literals', rule, {
       `,
       options: [{noStrings: true}],
       errors: [{message: 'Strings not allowed in JSX files'}]
+    }, {
+      code: `
+        <Foo bar="test">
+          {'Test' + name}
+        </Foo>
+      `,
+      options: [{noStrings: true}],
+      errors: [{message: 'Strings not allowed in JSX files'}]
     }, {
       code: `
         <Foo bar="test">
@@ -315,6 +323,35 @@ ruleTester.run('jsx-no-literals', rule, {
       code: '<Foo bar={`Test`} />',
       options: [{noStrings: true}],
       errors: [{message: 'Strings not allowed in JSX files'}]
+    }, {
+      code: '<Foo bar={`${baz}`} />',
+      options: [{noStrings: true}],
+      errors: [{message: 'Strings not allowed in JSX files'}]
+    }, {
+      code: '<Foo bar={`Test ${baz}`} />',
+      options: [{noStrings: true}],
+      errors: [{message: 'Strings not allowed in JSX files'}]
+    }, {
+      code: '<Foo bar={`foo` + \'bar\'} />',
+      options: [{noStrings: true}],
+      errors: [
+        {message: 'Strings not allowed in JSX files'},
+        {message: 'Strings not allowed in JSX files'}
+      ]
+    }, {
+      code: '<Foo bar={`foo` + `bar`} />',
+      options: [{noStrings: true}],
+      errors: [
+        {message: 'Strings not allowed in JSX files'},
+        {message: 'Strings not allowed in JSX files'}
+      ]
+    }, {
+      code: '<Foo bar={\'foo\' + `bar`} />',
+      options: [{noStrings: true}],
+      errors: [
+        {message: 'Strings not allowed in JSX files'},
+        {message: 'Strings not allowed in JSX files'}
+      ]
     }
   ]
 });