[Tests] add mount-passing, shallow-failing test for useEffect hook

Pending facebook/react#14840
enzymejs · Mar 6, 2019 · df0c326 · df0c326
1 parent 47350d0
commit df0c326
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 0 deletions.
diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -31,6 +31,8 @@ import {
   forwardRef,
   memo,
   PureComponent,
+  useEffect,
+  useState,
 } from './_helpers/react-compat';
 import {
   describeWithDOM,
@@ -648,6 +650,42 @@ describeWithDOM('mount', () => {
     });
   });
 
+  describeIf(is('>= 16.8'), 'hooks', () => {
+    it('works with `useEffect`', (done) => {
+      function ComponentUsingEffectHook() {
+        const [ctr, setCtr] = useState(0);
+        useEffect(() => {
+          setCtr(1);
+          setTimeout(() => {
+            setCtr(2);
+          }, 1e3);
+        }, []);
+        return (
+          <div>
+            {ctr}
+          </div>
+        );
+      }
+      const wrapper = mount(<ComponentUsingEffectHook />);
+
+      expect(wrapper.debug()).to.equal(`<ComponentUsingEffectHook>
+  <div>
+    1
+  </div>
+</ComponentUsingEffectHook>`);
+
+      setTimeout(() => {
+        wrapper.update();
+        expect(wrapper.debug()).to.equal(`<ComponentUsingEffectHook>
+  <div>
+    2
+  </div>
+</ComponentUsingEffectHook>`);
+        done();
+      }, 1e3);
+    });
+  });
+
   describe('.contains(node)', () => {
     it('allows matches on the root node', () => {
       const a = <div className="foo" />;

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -31,6 +31,8 @@ import {
   forwardRef,
   memo,
   PureComponent,
+  useEffect,
+  useState,
 } from './_helpers/react-compat';
 import {
   describeIf,
@@ -653,6 +655,39 @@ describe('shallow', () => {
     });
   });
 
+  describeIf(is('>= 16.8'), 'hooks', () => {
+    // TODO: enable when the shallow renderer fixes its bug
+    it.skip('works with `useEffect`', (done) => {
+      function ComponentUsingEffectHook() {
+        const [ctr, setCtr] = useState(0);
+        useEffect(() => {
+          setCtr(1);
+          setTimeout(() => {
+            setCtr(2);
+          }, 1e3);
+        }, []);
+        return (
+          <div>
+            {ctr}
+          </div>
+        );
+      }
+      const wrapper = shallow(<ComponentUsingEffectHook />);
+
+      expect(wrapper.debug()).to.equal(`<div>
+  1
+</div>`);
+
+      setTimeout(() => {
+        wrapper.update();
+        expect(wrapper.debug()).to.equal(`<div>
+  2
+</div>`);
+        done();
+      }, 1e3);
+    });
+  });
+
   describe('.contains(node)', () => {
     it('allows matches on the root node', () => {
       const a = <div className="foo" />;