[Tests] Add useLayoutEffect tests for mount

Also reduce the timeout from 1e3 to 100. Skip shallow tests until [shallow renderer can run useEffect](facebook/react#15275) is fixed.
chenesan · May 11, 2019 · 1b85181 · 1b85181
1 parent cd430ea
commit 1b85181
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 5 deletions.
diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -30,6 +30,7 @@ import {
   PureComponent,
   Suspense,
   useEffect,
+  useLayoutEffect,
   useState,
 } from './_helpers/react-compat';
 import {
@@ -973,7 +974,7 @@ describeWithDOM('mount', () => {
           setCtr(1);
           setTimeout(() => {
             setCtr(2);
-          }, 1e3);
+          }, 100);
         }, []);
         return (
           <div>
@@ -997,7 +998,41 @@ describeWithDOM('mount', () => {
   </div>
 </ComponentUsingEffectHook>`);
         done();
-      }, 1e3);
+      }, 100);
+    });
+
+    it('works with `useLayoutEffect`', (done) => {
+      function ComponentUsingLayoutEffectHook() {
+        const [ctr, setCtr] = useState(0);
+        useLayoutEffect(() => {
+          setCtr(1);
+          setTimeout(() => {
+            setCtr(2);
+          }, 100);
+        }, []);
+        return (
+          <div>
+            {ctr}
+          </div>
+        );
+      }
+      const wrapper = mount(<ComponentUsingLayoutEffectHook />);
+
+      expect(wrapper.debug()).to.equal(`<ComponentUsingLayoutEffectHook>
+  <div>
+    1
+  </div>
+</ComponentUsingLayoutEffectHook>`);
+
+      setTimeout(() => {
+        wrapper.update();
+        expect(wrapper.debug()).to.equal(`<ComponentUsingLayoutEffectHook>
+  <div>
+    2
+  </div>
+</ComponentUsingLayoutEffectHook>`);
+        done();
+      }, 100);
     });
   });
 

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -27,6 +27,7 @@ import {
   PureComponent,
   Suspense,
   useEffect,
+  useLayoutEffect,
   useState,
   Profiler,
   memo,
@@ -1131,13 +1132,44 @@ describe('shallow', () => {
   describeIf(is('>= 16.8.5'), 'hooks', () => {
     // TODO: enable when the shallow renderer fixes its bug
     it.skip('works with `useEffect`', (done) => {
-      function ComponentUsingEffectHook() {
+      function ComponentUsingLayoutEffectHook() {
         const [ctr, setCtr] = useState(0);
         useEffect(() => {
           setCtr(1);
           setTimeout(() => {
             setCtr(2);
-          }, 1e3);
+          }, 100);
+        }, []);
+        return (
+          <div>
+            {ctr}
+          </div>
+        );
+      }
+      const wrapper = shallow(<ComponentUsingLayoutEffectHook />);
+
+      expect(wrapper.debug()).to.equal(`<div>
+  1
+</div>`);
+
+      setTimeout(() => {
+        wrapper.update();
+        expect(wrapper.debug()).to.equal(`<div>
+  2
+</div>`);
+        done();
+      }, 100);
+    });
+
+    // TODO: enable when https://github.com/facebook/react/issues/15275 is fixed
+    it.skip('works with `useLayoutEffect`', (done) => {
+      function ComponentUsingEffectHook() {
+        const [ctr, setCtr] = useState(0);
+        useLayoutEffect(() => {
+          setCtr(1);
+          setTimeout(() => {
+            setCtr(2);
+          }, 100);
         }, []);
         return (
           <div>
@@ -1157,7 +1189,7 @@ describe('shallow', () => {
   2
 </div>`);
         done();
-      }, 1e3);
+      }, 100);
     });
   });