Delete styleName prop after adding the corresponding className

React CSS Modules should "consume" the styleName property of a
decorated Component as it is not intended for its children.

Author: olistic

src/linkClass.js

@@ -46,10 +46,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

@@ -99,7 +99,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>
@@ -112,8 +112,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', () => {
@@ -262,7 +262,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>;
@@ -272,10 +272,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'>
@@ -289,6 +289,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

@@ -38,9 +38,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 {
@@ -55,15 +56,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 = () => {
@@ -76,10 +82,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', () => {