Fix style-prop-object to deal with null and spread props that can't be

resolved (Fixes jsx-eslint#809) (Fixes jsx-eslint#812)
petersendidit · Sep 16, 2016 · 264754e · 264754e
1 parent 0348173
commit 264754e
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 4 deletions.
diff --git a/lib/rules/style-prop-object.js b/lib/rules/style-prop-object.js
@@ -29,7 +29,7 @@ module.exports = {
         return item.name === node.name;
       });
 
-      if (!variable || !variable.defs[0].node.init) {
+      if (!variable || !variable.defs[0] || !variable.defs[0].node.init) {
         return;
       }
 
@@ -48,12 +48,12 @@ module.exports = {
         ) {
           if (node.arguments[1].type === 'ObjectExpression') {
             var style = node.arguments[1].properties.find(function(property) {
-              return property.key.name === 'style' && !property.computed;
+              return property.key && property.key.name === 'style' && !property.computed;
             });
             if (style) {
               if (style.value.type === 'Identifier') {
                 checkIdentifiers(style.value);
-              } else if (style.value.type === 'Literal') {
+              } else if (style.value.type === 'Literal' && style.value.value !== null) {
                 context.report(style.value, 'Style prop value must be an object');
               }
             }
@@ -68,7 +68,7 @@ module.exports = {
 
         if (
           node.value.type !== 'JSXExpressionContainer'
-          || node.value.expression.type === 'Literal'
+          || (node.value.expression.type === 'Literal' && node.value.expression.value !== null)
         ) {
           context.report(node, 'Style prop value must be an object');
         } else if (node.value.expression.type === 'Identifier') {

diff --git a/tests/lib/rules/style-prop-object.js b/tests/lib/rules/style-prop-object.js
@@ -114,6 +114,86 @@ ruleTester.run('style-prop-object', rule, {
         '}, \'My custom Elem\')'
       ].join('\n'),
       parserOptions: parserOptions
+    },
+    {
+      code: [
+        'let style;',
+        '<div style={style}></div>'
+      ].join('\n'),
+      parserOptions: parserOptions
+    },
+    {
+      code: '<div style={undefined}></div>',
+      parserOptions: parserOptions
+    },
+    {
+      code: [
+        'const props = { style: undefined };',
+        '<div {...props} />'
+      ].join('\n'),
+      parserOptions: parserOptions
+    },
+    {
+      code: [
+        'const otherProps = { style: undefined };',
+        'const { a, b, ...props } = otherProps;',
+        '<div {...props} />'
+      ].join('\n'),
+      parserOptions: parserOptions
+    },
+    {
+      code: [
+        'React.createElement("div", {',
+        '  style: undefined',
+        '})'
+      ].join('\n'),
+      parserOptions: parserOptions
+    },
+    {
+      code: [
+        'let style;',
+        'React.createElement("div", {',
+        '  style',
+        '})'
+      ].join('\n'),
+      parserOptions: parserOptions
+    },
+    {
+      code: '<div style={null}></div>',
+      parserOptions: parserOptions
+    },
+    {
+      code: [
+        'const props = { style: null };',
+        '<div {...props} />'
+      ].join('\n'),
+      parserOptions: parserOptions
+    },
+    {
+      code: [
+        'const otherProps = { style: null };',
+        'const { a, b, ...props } = otherProps;',
+        '<div {...props} />'
+      ].join('\n'),
+      parserOptions: parserOptions
+    },
+    {
+      code: [
+        'React.createElement("div", {',
+        '  style: null',
+        '})'
+      ].join('\n'),
+      parserOptions: parserOptions
+    },
+    {
+      code: [
+        'const MyComponent = (props) => {',
+        '  React.createElement(MyCustomElem, {',
+        '    ...props',
+        '  });',
+        '};'
+      ].join('\n'),
+      parserOptions: parserOptions
     }
   ],
   invalid: [