Support Suspense in shallow renderer

packages/react-test-renderer/src/ReactShallowRenderer.js

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {isForwardRef} from 'react-is';
+import {isForwardRef, isSuspense} from 'react-is';
 import describeComponentFrame from 'shared/describeComponentFrame';
 import getComponentName from 'shared/getComponentName';
 import shallowEqual from 'shared/shallowEqual';
@@ -499,7 +499,9 @@ class ReactShallowRenderer {
       element.type,
     );
     invariant(
-      isForwardRef(element) || typeof element.type === 'function',
+      isSuspense(element) ||
+        isForwardRef(element) ||
+        typeof element.type === 'function',
       'ReactShallowRenderer render(): Shallow rendering works only with custom ' +
         'components, but the provided element type was `%s`.',
       Array.isArray(element.type)
@@ -520,7 +522,9 @@ class ReactShallowRenderer {
     if (this._instance) {
       this._updateClassComponent(element, this._context);
     } else {
-      if (isForwardRef(element)) {
+      if (isSuspense(element)) {
+        this._rendered = element.props.children;
+      } else if (isForwardRef(element)) {
         this._rendered = element.type.render(element.props, element.ref);
       } else if (shouldConstruct(element.type)) {
         this._instance = new element.type(

packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js

@@ -13,6 +13,7 @@
 let createRenderer;
 let PropTypes;
 let React;
+let ReactIs;
 
 describe('ReactShallowRenderer', () => {
   beforeEach(() => {
@@ -21,6 +22,7 @@ describe('ReactShallowRenderer', () => {
     createRenderer = require('react-test-renderer/shallow').createRenderer;
     PropTypes = require('prop-types');
     React = require('react');
+    ReactIs = require('react-is');
   });
 
   it('should call all of the legacy lifecycle hooks', () => {
@@ -256,6 +258,31 @@ describe('ReactShallowRenderer', () => {
     );
   });
 
+  it('should handle Suspense', () => {
+    const fallback = <div>fallback</div>;
+    const shallowRenderer = createRenderer();
+    const targetText = 'test';
+    const result = shallowRenderer.render(
+      <React.Suspense fallback={fallback}>
+        <div>{targetText}</div>
+      </React.Suspense>,
+    );
+    expect(result.type).toBe('div');
+    expect(result.props.children).toBe(targetText);
+  });
+
+  it('should shallow render lazy component in children and not to handle fallback', () => {
+    const fallback = <div>fallback</div>;
+    const LazyComponent = React.lazy(() => Promise.resolve({default: null}));
+    const shallowRenderer = createRenderer();
+    const result = shallowRenderer.render(
+      <React.Suspense fallback={fallback}>
+        <LazyComponent />
+      </React.Suspense>,
+    );
+    expect(ReactIs.isLazy(result.type)).toBe(true);
+  });
+
   it('should enable shouldComponentUpdate to prevent a re-render', () => {
     let renderCounter = 0;
     class SimpleComponent extends React.Component {