feat: make styles property non-enumerable

Author: gajus

src/extendReactClass.js

@@ -22,10 +22,17 @@ export default (Component: Object, defaultStyles: Object, options: Object) => {
       if (this.props.styles) {
         styles = this.props.styles;
       } else if (_.isObject(defaultStyles)) {
-        this.props = _.assign({}, this.props, {
-          styles: defaultStyles
+        const props = Object.assign({}, this.props);
+
+        Object.defineProperty(props, 'styles', {
+          configurable: true,
+          enumerable: false,
+          value: defaultStyles,
+          writable: false
         });
 
+        this.props = props;
+
         propsChanged = true;
         styles = defaultStyles;
       } else {

src/wrapStatelessFunction.js

@@ -20,6 +20,13 @@ export default (Component: Function, defaultStyles: Object, options: Object): Fu
         styles: defaultStyles
       });
 
+      Object.defineProperty(useProps, 'styles', {
+        configurable: true,
+        enumerable: false,
+        value: defaultStyles,
+        writable: false
+      });
+
       styles = defaultStyles;
     } else {
       useProps = props;

tests/extendReactClass.js

@@ -34,6 +34,24 @@ describe('extendReactClass', () => {
 
       TestUtils.renderIntoDocument(<Component />);
     });
+    it('exposes non-enumerable styles property', (done) => {
+      let Component;
+
+      const styles = {
+        foo: 'foo-1'
+      };
+
+      Component = class extends React.Component {
+        render () {
+          expect(this.props.propertyIsEnumerable('styles')).to.equal(false);
+          done();
+        }
+      };
+
+      Component = extendReactClass(Component, styles);
+
+      TestUtils.renderIntoDocument(<Component />);
+    });
     it('does not affect the other instance properties', (done) => {
       let Component;
 

tests/wrapStatelessFunction.js

@@ -37,6 +37,16 @@ describe('wrapStatelessFunction', () => {
         done();
       }, styles)();
     });
+    it('exposes non-enumerable styles property', (done) => {
+      const styles = {
+        foo: 'foo-1'
+      };
+
+      wrapStatelessFunction((props) => {
+        expect(props.propertyIsEnumerable('styles')).to.equal(false);
+        done();
+      }, styles)();
+    });
     it('does not affect the other instance properties', (done) => {
       const styles = {
         foo: 'foo-1'