Render components that return null for various React versions

Author: sdoomz

src/extendReactClass.js

@@ -1,9 +1,10 @@
 /* eslint-disable react/prop-types */
 
-import React from 'react';
 import _ from 'lodash';
+import React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import linkClass from './linkClass';
+import renderNothing from './renderNothing';
 
 /**
  * @param {ReactClass} Component
@@ -49,9 +50,9 @@ export default (Component: Object, defaultStyles: Object, options: Object) => {
         return linkClass(renderResult, styles, options);
       }
 
-      return React.createElement('noscript');
+      return renderNothing(React.version);
     }
-    };
+  };
 
   return hoistNonReactStatics(WrappedComponent, Component);
 };

src/renderNothing.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function (version) {
+  const major = version.split('.')[0];
+
+  return parseInt(major, 10) < 15 ? React.createElement('noscript') : null;
+}

src/wrapStatelessFunction.js

@@ -3,6 +3,7 @@
 import _ from 'lodash';
 import React from 'react';
 import linkClass from './linkClass';
+import renderNothing from './renderNothing';
 
 /**
  * @see https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components
@@ -39,7 +40,7 @@ export default (Component: Function, defaultStyles: Object, options: Object): Fu
       return linkClass(renderResult, styles, options);
     }
 
-    return React.createElement('noscript');
+    return renderNothing(React.version);
   };
 
   _.assign(WrappedComponent, Component);

tests/extendReactClass.js

@@ -128,7 +128,7 @@ describe('extendReactClass', () => {
     });
   });
   context('rendering Component that returns null', () => {
-    it('generates <noscript> element', () => {
+    it('generates null', () => {
       let Component;
 
       const shallowRenderer = TestUtils.createRenderer();
@@ -145,7 +145,7 @@ describe('extendReactClass', () => {
 
       const component = shallowRenderer.getRenderOutput();
 
-      expect(component.type).to.equal('noscript');
+      expect(component).to.equal(null);
     });
   });
   context('target component have static properties', () => {

tests/renderNothing.js

@@ -0,0 +1,16 @@
+import {
+    expect
+} from 'chai';
+import renderNothing from '../src/renderNothing';
+
+describe('renderNothing', () => {
+  context('renderNothing should return different node types for various React versions', () => {
+    it('should return noscript tag for React v14 or lower', () => {
+      expect(renderNothing('14.0.0').type).to.equal('noscript');
+    });
+
+    it('should return null for React v15 or higher', () => {
+      expect(renderNothing('15.0.0')).to.equal(null);
+    });
+  });
+});

tests/wrapStatelessFunction.js

@@ -75,7 +75,7 @@ describe('wrapStatelessFunction', () => {
     });
   });
   context('rendering Component that returns null', () => {
-    it('generates <noscript> element', () => {
+    it('generates null', () => {
       const shallowRenderer = TestUtils.createRenderer();
 
       const Component = wrapStatelessFunction(() => {
@@ -86,7 +86,7 @@ describe('wrapStatelessFunction', () => {
 
       const component = shallowRenderer.getRenderOutput();
 
-      expect(component.type).to.equal('noscript');
+      expect(component).to.equal(null);
     });
   });
 });