Merge pull request jsx-eslint#206 from epmatsw/render-with-createElement

Treat component with render which returns createElement as Valid

Author: yannickcr

lib/util/component.js

@@ -25,10 +25,18 @@ function isReactComponent(context, node) {
   while (scope.upper && scope.type !== 'function') {
     scope = scope.upper;
   }
-
-  var isComponentRender =
+  var returnsJSX =
+    node.argument &&
+    node.argument.type === 'JSXElement'
+  ;
+  var returnsReactCreateElement =
     node.argument &&
-    node.argument.type === 'JSXElement' &&
+    node.argument.callee &&
+    node.argument.callee.property &&
+    node.argument.callee.property.name === 'createElement'
+  ;
+  var isComponentRender =
+    (returnsJSX || returnsReactCreateElement) &&
     scope.block.parent.key && scope.block.parent.key.name === 'render'
   ;
   var isEmptyComponentRender =

tests/lib/rules/sort-comp.js

@@ -205,6 +205,20 @@ ruleTester.run('sort-comp', rule, {
       jsx: true
     },
     errors: [{message: 'render must be placed after displayName'}]
+  }, {
+    // Must run rule when render uses createElement instead of JSX
+    code: [
+      'var Hello = React.createClass({',
+      '  render: function() {',
+      '    return React.createElement("div", null, "Hello");',
+      '  },',
+      '  displayName : \'Hello\',',
+      '});'
+    ].join('\n'),
+    ecmaFeatures: {
+      jsx: true
+    },
+    errors: [{message: 'render must be placed after displayName'}]
   }, {
     // Must force a custom method to be placed before render
     code: [