Add fragment support to react-in-jsx-scope (fixes #1758)

jsx-eslint · May 8, 2018 · d51b0cc · d51b0cc
1 parent fb7ce94
commit d51b0cc
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/lib/rules/react-in-jsx-scope.js b/lib/rules/react-in-jsx-scope.js
@@ -27,22 +27,23 @@ module.exports = {
     const pragma = pragmaUtil.getFromContext(context);
     const NOT_DEFINED_MESSAGE = '\'{{name}}\' must be in scope when using JSX';
 
-    return {
-
-      JSXOpeningElement: function(node) {
-        const variables = variableUtil.variablesInScope(context);
-        if (variableUtil.findVariable(variables, pragma)) {
-          return;
-        }
-        context.report({
-          node: node,
-          message: NOT_DEFINED_MESSAGE,
-          data: {
-            name: pragma
-          }
-        });
+    function checkIfReactIsInScope(node) {
+      const variables = variableUtil.variablesInScope(context);
+      if (variableUtil.findVariable(variables, pragma)) {
+        return;
       }
+      context.report({
+        node: node,
+        message: NOT_DEFINED_MESSAGE,
+        data: {
+          name: pragma
+        }
+      });
+    }
 
+    return {
+      JSXOpeningElement: checkIfReactIsInScope,
+      JSXOpeningFragment: checkIfReactIsInScope
     };
   }
 };
diff --git a/tests/lib/rules/react-in-jsx-scope.js b/tests/lib/rules/react-in-jsx-scope.js
@@ -36,6 +36,7 @@ ruleTester.run('react-in-jsx-scope', rule, {
   valid: [
     {code: 'var React, App; <App />;'},
     {code: 'var React; <img />;'},
+    {code: 'var React; <>fragment</>;', parser: 'babel-eslint'},
     {code: 'var React; <x-gif />;'},
     {code: 'var React, App, a=1; <App attr={a} />;'},
     {code: 'var React, App, a=1; function elem() { return <App attr={a} />; }'},
@@ -64,6 +65,10 @@ ruleTester.run('react-in-jsx-scope', rule, {
   }, {
     code: 'var a = <img />;',
     errors: [{message: '\'React\' must be in scope when using JSX'}]
+  }, {
+    code: 'var a = <>fragment</>;',
+    parser: 'babel-eslint',
+    errors: [{message: '\'React\' must be in scope when using JSX'}]
   }, {
     code: '/** @jsx React.DOM */ var a = <img />;',
     errors: [{message: '\'React\' must be in scope when using JSX'}]