[enzyme-adapter-react-16] [fix] Fix detect component used Suspense

enzymejs · Feb 8, 2020 · 04cce43 · 04cce43
1 parent 8c254a1
commit 04cce43
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 16 deletions.
diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
@@ -120,6 +120,22 @@ function unmemoType(type) {
   return isMemo(type) ? type.type : type;
 }
 
+function checkIsSuspenseAndCloneElement(el, { suspenseFallback }) {
+  if (!isSuspense(el)) {
+    return el;
+  }
+
+  let { children } = el.props;
+
+  if (suspenseFallback) {
+    const { fallback } = el.props;
+    children = replaceLazyWithFallback(children, fallback);
+  }
+
+  const FakeSuspenseWrapper = (props) => React.createElement(el.type, { ...el.props, ...props }, children);
+  return React.createElement(FakeSuspenseWrapper, null, children);
+}
+
 function elementToTree(el) {
   if (!isPortal(el)) {
     return utilElementToTree(el, elementToTree);
@@ -588,6 +604,22 @@ class ReactSixteenAdapter extends EnzymeAdapter {
       return wrappedComponent;
     };
 
+    const renderElement = (elConfig, ...rest) => {
+      const renderedEl = renderer.render(elConfig, ...rest);
+
+      const typeIsExisted = !!(renderedEl && renderedEl.type);
+      if (is166 && typeIsExisted) {
+        const clonedEl = checkIsSuspenseAndCloneElement(renderedEl, { suspenseFallback });
+
+        const elementIsChanged = clonedEl.type !== renderedEl.type;
+        if (elementIsChanged) {
+          return renderer.render({ ...elConfig, type: clonedEl.type }, ...rest);
+        }
+      }
+
+      return renderedEl;
+    };
+
     return {
       render(el, unmaskedContext, {
         providerValues = new Map(),
@@ -602,7 +634,7 @@ class ReactSixteenAdapter extends EnzymeAdapter {
             (props) => props.children,
             el.type,
           );
-          return withSetStateAllowed(() => renderer.render({ ...el, type: MockProvider }));
+          return withSetStateAllowed(() => renderElement({ ...el, type: MockProvider }));
         } else if (isContextConsumer(el)) {
           const Provider = adapter.getProviderFromConsumer(el.type);
           const value = providerValues.has(Provider)
@@ -612,37 +644,31 @@ class ReactSixteenAdapter extends EnzymeAdapter {
             (props) => props.children(value),
             el.type,
           );
-          return withSetStateAllowed(() => renderer.render({ ...el, type: MockConsumer }));
+          return withSetStateAllowed(() => renderElement({ ...el, type: MockConsumer }));
         } else {
           isDOM = false;
           let renderedEl = el;
           if (isLazy(renderedEl)) {
             throw TypeError('`React.lazy` is not supported by shallow rendering.');
           }
-          if (isSuspense(renderedEl)) {
-            let { children } = renderedEl.props;
-            if (suspenseFallback) {
-              const { fallback } = renderedEl.props;
-              children = replaceLazyWithFallback(children, fallback);
-            }
-            const FakeSuspenseWrapper = () => children;
-            renderedEl = React.createElement(FakeSuspenseWrapper, null, children);
-          }
+
+          renderedEl = checkIsSuspenseAndCloneElement(renderedEl, { suspenseFallback });
           const { type: Component } = renderedEl;
 
           const context = getMaskedContext(Component.contextTypes, unmaskedContext);
 
           if (isMemo(el.type)) {
             const { type: InnerComp, compare } = el.type;
 
-            return withSetStateAllowed(() => renderer.render(
+            return withSetStateAllowed(() => renderElement(
               { ...el, type: wrapPureComponent(InnerComp, compare) },
               context,
             ));
           }
 
+
           if (!isStateful(Component) && typeof Component === 'function') {
-            return withSetStateAllowed(() => renderer.render(
+            return withSetStateAllowed(() => renderElement(
               { ...renderedEl, type: wrapFunctionalComponent(Component) },
               context,
             ));
@@ -672,7 +698,7 @@ class ReactSixteenAdapter extends EnzymeAdapter {
               });
             }
           }
-          return withSetStateAllowed(() => renderer.render(renderedEl, context));
+          return withSetStateAllowed(() => renderElement(renderedEl, context));
         }
       },
       unmount() {

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -1816,7 +1816,9 @@ describe('shallow', () => {
         </Suspense>
       ));
 
-      expect(wrapper.debug()).to.equal('<lazy />');
+      expect(wrapper.debug()).to.equal(`<Suspense fallback={{...}}>
+  <lazy />
+</Suspense>`);
     });
 
     it('replaces LazyComponent with Fallback when render Suspense if options.suspenseFallback=true', () => {
@@ -1841,7 +1843,9 @@ describe('shallow', () => {
         </Suspense>
       ), { suspenseFallback: true });
 
-      expect(wrapper.debug()).to.equal('<Fallback />');
+      expect(wrapper.debug()).to.equal(`<Suspense fallback={{...}}>
+  <Fallback />
+</Suspense>`);
     });
 
     it('throws if options.suspenseFallback is not boolean or undefined', () => {