treat component with render which returns createElement as valid

jsx-eslint · Sep 3, 2015 · 2a0d7f4 · 2a0d7f4
1 parent d39a6cc
commit 2a0d7f4
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/lib/util/component.js b/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 =

diff --git a/tests/lib/rules/sort-comp.js b/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: [