Merge pull request #1011 from jomasti/fix-996

Check for createElement being called from React

Author: lencioni

lib/util/Components.js

@@ -256,9 +256,23 @@ function componentRule(rule, context) {
         node[property] &&
         node[property].type === 'JSXElement'
       ;
+      var destructuredReactCreateElement = function () {
+        var variables = variableUtil.variablesInScope(context);
+        var variable = variableUtil.getVariable(variables, 'createElement');
+        if (variable) {
+          var map = variable.scope.set;
+          if (map.has('React')) {
+            return true;
+          }
+        }
+        return false;
+      };
       var returnsReactCreateElement =
+        destructuredReactCreateElement() ||
         node[property] &&
         node[property].callee &&
+        node[property].callee.object &&
+        node[property].callee.object.name === 'React' &&
         node[property].callee.property &&
         node[property].callee.property.name === 'createElement'
       ;

lib/util/variable.js

@@ -11,16 +11,21 @@
  * @returns {Boolean} True if the variable was found, false if not.
  */
 function findVariable(variables, name) {
-  var i;
-  var len;
-
-  for (i = 0, len = variables.length; i < len; i++) {
-    if (variables[i].name === name) {
-      return true;
-    }
-  }
+  return variables.some(function (variable) {
+    return variable.name === name;
+  });
+}
 
-  return false;
+/**
+ * Find and return a particular variable in a list
+ * @param {Array} variables The variables list.
+ * @param {Array} name The name of the variable to search.
+ * @returns {Object} Variable if the variable was found, null if not.
+ */
+function getVariable(variables, name) {
+  return variables.find(function (variable) {
+    return variable.name === name;
+  });
 }
 
 /**
@@ -52,5 +57,6 @@ function variablesInScope(context) {
 
 module.exports = {
   findVariable: findVariable,
+  getVariable: getVariable,
   variablesInScope: variablesInScope
 };

tests/lib/rules/display-name.js

@@ -378,6 +378,19 @@ ruleTester.run('display-name', rule, {
       ')'
     ].join('\n'),
     parser: 'babel-eslint'
+  }, {
+    code: [
+      'module.exports = {',
+      '  createElement: tagName => document.createElement(tagName)',
+      '};'
+    ].join('\n'),
+    parser: 'babel-eslint'
+  }, {
+    code: [
+      'const { createElement } = document;',
+      'createElement("a");'
+    ].join('\n'),
+    parser: 'babel-eslint'
   }],
 
   invalid: [{
@@ -548,5 +561,40 @@ ruleTester.run('display-name', rule, {
     errors: [{
       message: 'Component definition is missing display name'
     }]
+  }, {
+    code: [
+      'import React, { createElement } from "react";',
+      'export default (props) => {',
+      '  return createElement("div", {}, "hello");',
+      '};'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    errors: [{
+      message: 'Component definition is missing display name'
+    }]
+  }, {
+    code: [
+      'import React from "react";',
+      'const { createElement } = React;',
+      'export default (props) => {',
+      '  return createElement("div", {}, "hello");',
+      '};'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    errors: [{
+      message: 'Component definition is missing display name'
+    }]
+  }, {
+    code: [
+      'import React from "react";',
+      'const createElement = React.createElement;',
+      'export default (props) => {',
+      '  return createElement("div", {}, "hello");',
+      '};'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    errors: [{
+      message: 'Component definition is missing display name'
+    }]
   }]
 });