support lazy components

enzymejs · Jun 6, 2021 · eb5b7a3 · eb5b7a3
1 parent f046079
commit eb5b7a3
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 0 deletions.
diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
@@ -218,6 +218,7 @@ function toTree(vnode) {
       };
     }
     case FiberTags.ClassComponent:
+    case FiberTags.ClassComponentLazy:
       return {
         nodeType: 'class',
         type: node.type,
@@ -228,6 +229,7 @@ function toTree(vnode) {
         rendered: childrenToTree(node.child),
       };
     case FiberTags.FunctionalComponent:
+    case FiberTags.FunctionalComponentLazy:
       return {
         nodeType: 'function',
         type: node.type,

diff --git a/packages/enzyme-adapter-react-16/src/detectFiberTags.js b/packages/enzyme-adapter-react-16/src/detectFiberTags.js
@@ -51,12 +51,22 @@ module.exports = function detectFiberTags() {
   function Fn() {
     return null;
   }
+  function LazyFn() {
+    throw Promise.resolve();
+  }
   // eslint-disable-next-line react/prefer-stateless-function
   class Cls extends React.Component {
     render() {
       return null;
     }
   }
+  // eslint-disable-next-line react/prefer-stateless-function
+  class LazyCls extends React.Component {
+    // eslint-disable-next-line react/require-render-return
+    render() {
+      throw Promise.resolve();
+    }
+  }
   let Ctx = null;
   let FwdRef = null;
   let LazyComponent = null;
@@ -75,8 +85,10 @@ module.exports = function detectFiberTags() {
   return {
     HostRoot: getFiber('test').return.return.tag, // Go two levels above to find the root
     ClassComponent: getFiber(React.createElement(Cls)).tag,
+    ClassComponentLazy: supportsSuspense ? getLazyFiber(LazyCls).tag : -1,
     Fragment: getFiber([['nested']]).tag,
     FunctionalComponent: getFiber(React.createElement(Fn)).tag,
+    FunctionalComponentLazy: supportsSuspense ? getLazyFiber(LazyFn).tag : -1,
     MemoSFC: supportsMemo
       ? getFiber(React.createElement(React.memo(Fn))).tag
       : -1,

diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -1285,6 +1285,55 @@ describeWithDOM('mount', () => {
     });
   });
 
+  describeIf(is('>= 16.6'), 'Suspense & lazy component', () => {
+    class Fallback extends React.Component {
+      render() {
+        return (
+          <div>Fallback</div>
+        );
+      }
+    }
+
+    it('finds fallback when given lazy class component', () => {
+      class Component extends React.Component {
+        // eslint-disable-next-line react/require-render-return
+        render() {
+          throw Promise.resolve();
+        }
+      }
+
+      const SuspenseComponent = () => (
+        <Suspense fallback={Fallback}>
+          <Component />
+        </Suspense>
+      );
+
+      const wrapper = mount(<SuspenseComponent />);
+
+      expect(wrapper.is(SuspenseComponent)).to.equal(true);
+      expect(wrapper.find(Component)).to.have.lengthOf(1);
+      expect(wrapper.find(Fallback)).to.have.lengthOf(1);
+    });
+
+    it('finds fallback when given lazy functional component', () => {
+      function Component() {
+        throw Promise.resolve();
+      }
+
+      const SuspenseComponent = () => (
+        <Suspense fallback={Fallback}>
+          <Component />
+        </Suspense>
+      );
+
+      const wrapper = mount(<SuspenseComponent />);
+
+      expect(wrapper.is(SuspenseComponent)).to.equal(true);
+      expect(wrapper.find(Component)).to.have.lengthOf(1);
+      expect(wrapper.find(Fallback)).to.have.lengthOf(1);
+    });
+  });
+
   describe('.mount()', () => {
     it('calls componentWillUnmount()', () => {
       const willMount = sinon.spy();

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -2077,6 +2077,55 @@ describe('shallow', () => {
     });
   });
 
+  describeIf(is('>= 16.6'), 'Suspense & lazy component', () => {
+    class Fallback extends React.Component {
+      render() {
+        return (
+          <div>Fallback</div>
+        );
+      }
+    }
+
+    it('finds fallback when given lazy class component', () => {
+      class Component extends React.Component {
+        // eslint-disable-next-line react/require-render-return
+        render() {
+          throw Promise.resolve();
+        }
+      }
+
+      const SuspenseComponent = () => (
+        <Suspense fallback={Fallback}>
+          <Component />
+        </Suspense>
+      );
+
+      const wrapper = shallow(<SuspenseComponent />, { suspenseFallback: true });
+
+      expect(wrapper.is(Suspense)).to.equal(true);
+      expect(wrapper.find(Component)).to.have.lengthOf(1);
+      expect(wrapper.find(Fallback)).to.have.lengthOf(1);
+    });
+
+    it('finds fallback when given lazy functional component', () => {
+      function Component() {
+        throw Promise.resolve();
+      }
+
+      const SuspenseComponent = () => (
+        <Suspense fallback={Fallback}>
+          <Component />
+        </Suspense>
+      );
+
+      const wrapper = shallow(<SuspenseComponent />, { suspenseFallback: true });
+
+      expect(wrapper.is(Suspense)).to.equal(true);
+      expect(wrapper.find(Component)).to.have.lengthOf(1);
+      expect(wrapper.find(Fallback)).to.have.lengthOf(1);
+    });
+  });
+
   describe('lifecycle methods', () => {
     describe('disableLifecycleMethods option', () => {
       describe('validation', () => {