Merge pull request gajus#148 from olistic/fix-unknown-prop-warning

Delete styleName prop after adding the corresponding className

Author: gajus

src/linkClass.js

@@ -45,10 +45,11 @@ const linkElement = (element: ReactElement, styles: Object, configuration: Objec
             }
 
             elementShallowCopy.props.className = appendClassName;
-            elementShallowCopy.props.styleName = null;
         }
     }
 
+    delete elementShallowCopy.props.styleName;
+
     if (elementIsFrozen) {
         Object.freeze(elementShallowCopy.props);
         Object.freeze(elementShallowCopy);

tests/linkClass.js

@@ -98,7 +98,7 @@ describe('linkClass', () => {
                 expect(subject.props.children[0].props.className).to.equal('foo-1');
                 expect(subject.props.children[1].props.className).to.equal('bar-1');
             });
-            it('styleName is reset to null', () => {
+            it('styleName is deleted from props', () => {
                 let subject;
 
                 subject = <div>
@@ -111,8 +111,8 @@ describe('linkClass', () => {
                     foo: 'foo-1'
                 });
 
-                expect(subject.props.children[0].props.styleName).to.equal(null);
-                expect(subject.props.children[1].props.styleName).to.equal(null);
+                expect(subject.props.children[0].props).not.to.have.property('styleName');
+                expect(subject.props.children[1].props).not.to.have.property('styleName');
             });
         });
         context('when multiple descendants have styleName and are iterable', () => {
@@ -261,7 +261,7 @@ describe('linkClass', () => {
         });
     });
 
-    it('unsets styleName property of the target element', () => {
+    it('deletes styleName property from the target element', () => {
         let subject;
 
         subject = <div styleName='foo'></div>;
@@ -271,10 +271,10 @@ describe('linkClass', () => {
         });
 
         expect(subject.props.className).to.deep.equal('foo-1');
-        expect(subject.props.styleName).to.deep.equal(null);
+        expect(subject.props).not.to.have.property('styleName');
     });
 
-    it('unsets styleName property of the target element (deep)', () => {
+    it('deletes styleName property from the target element (deep)', () => {
         let subject;
 
         subject = <div styleName='foo'>
@@ -288,6 +288,6 @@ describe('linkClass', () => {
         });
 
         expect(subject.props.children[0].props.className).to.deep.equal('bar-1');
-        expect(subject.props.children[0].props.styleName).to.deep.equal(null);
+        expect(subject.props.children[0].props).not.to.have.property('styleName');
     });
 });

tests/reactCssModules.js

@@ -37,9 +37,10 @@ describe('reactCssModules', () => {
     });
     context('a ReactComponent renders an element with the styleName prop', () => {
         context('the component is a class that extends React.Component', () => {
-            it('that element should contain the equivalent className', () => {
-                let Foo;
+            let Foo,
+                component;
 
+            beforeEach(() => {
                 const shallowRenderer = TestUtils.createRenderer();
 
                 Foo = class extends React.Component {
@@ -54,15 +55,20 @@ describe('reactCssModules', () => {
 
                 shallowRenderer.render(<Foo />);
 
-                const component = shallowRenderer.getRenderOutput();
-
+                component = shallowRenderer.getRenderOutput();
+            });
+            it('that element should contain the equivalent className', () => {
                 expect(component.props.className).to.equal('foo-1');
             });
+            it('the styleName prop should be "consumed" in the process', () => {
+                expect(component.props).not.to.have.property('styleName');
+            });
         });
         context('the component is a stateless function component', () => {
-            it('that element should contain the equivalent className', () => {
-                let Foo;
+            let Foo,
+                component;
 
+            beforeEach(() => {
                 const shallowRenderer = TestUtils.createRenderer();
 
                 Foo = () => {
@@ -75,10 +81,14 @@ describe('reactCssModules', () => {
 
                 shallowRenderer.render(<Foo />);
 
-                const component = shallowRenderer.getRenderOutput();
-
+                component = shallowRenderer.getRenderOutput();
+            });
+            it('that element should contain the equivalent className', () => {
                 expect(component.props.className).to.equal('foo-1');
             });
+            it('the styleName prop should be "consumed" in the process', () => {
+                expect(component.props).not.to.have.property('styleName');
+            });
         });
     });
     context('a ReactComponent renders nothing', () => {