[enzyme-adapter-react-{16,16.1,16.2}] [Fix] ensure that this.state …

…starts out `null` when unspecified on a custom component Fixes #1849. This bug in react's shallow renderer was fixed in facebook/react#11965, and only exists in React v16.0 - v16.2.
enzymejs · Oct 2, 2018 · e18bb65 · e18bb65
1 parent 6d1a498
commit e18bb65
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 0 deletions.
diff --git a/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js b/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js
@@ -210,6 +210,22 @@ function nodeToHostNode(_node) {
 
 const eventOptions = { animation: true };
 
+function getEmptyStateValue() {
+  // this handles a bug in React 16.0 - 16.2
+  // see https://github.com/facebook/react/commit/39be83565c65f9c522150e52375167568a2a1459
+  // also see https://github.com/facebook/react/pull/11965
+
+  // eslint-disable-next-line react/prefer-stateless-function
+  class EmptyState extends React.Component {
+    render() {
+      return null;
+    }
+  }
+  const testRenderer = new ShallowRenderer();
+  testRenderer.render(React.createElement(EmptyState));
+  return testRenderer._instance.state;
+}
+
 class ReactSixteenOneAdapter extends EnzymeAdapter {
   constructor() {
     super();
@@ -319,6 +335,30 @@ class ReactSixteenOneAdapter extends EnzymeAdapter {
             );
             return withSetStateAllowed(() => renderer.render({ ...el, type: wrappedEl }, context));
           }
+          if (isStateful) {
+            // fix react bug; see implementation of `getEmptyStateValue`
+            const emptyStateValue = getEmptyStateValue();
+            if (emptyStateValue) {
+              Object.defineProperty(Component.prototype, 'state', {
+                configurable: true,
+                enumerable: true,
+                get() {
+                  return null;
+                },
+                set(value) {
+                  if (value !== emptyStateValue) {
+                    Object.defineProperty(this, 'state', {
+                      configurable: true,
+                      enumerable: true,
+                      value,
+                      writable: true,
+                    });
+                  }
+                  return true;
+                },
+              });
+            }
+          }
           return withSetStateAllowed(() => renderer.render(el, context));
         }
       },

diff --git a/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js b/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js
@@ -211,6 +211,22 @@ function nodeToHostNode(_node) {
 
 const eventOptions = { animation: true };
 
+function getEmptyStateValue() {
+  // this handles a bug in React 16.0 - 16.2
+  // see https://github.com/facebook/react/commit/39be83565c65f9c522150e52375167568a2a1459
+  // also see https://github.com/facebook/react/pull/11965
+
+  // eslint-disable-next-line react/prefer-stateless-function
+  class EmptyState extends React.Component {
+    render() {
+      return null;
+    }
+  }
+  const testRenderer = new ShallowRenderer();
+  testRenderer.render(React.createElement(EmptyState));
+  return testRenderer._instance.state;
+}
+
 class ReactSixteenTwoAdapter extends EnzymeAdapter {
   constructor() {
     super();
@@ -321,6 +337,30 @@ class ReactSixteenTwoAdapter extends EnzymeAdapter {
             );
             return withSetStateAllowed(() => renderer.render({ ...el, type: wrappedEl }, context));
           }
+          if (isStateful) {
+            // fix react bug; see implementation of `getEmptyStateValue`
+            const emptyStateValue = getEmptyStateValue();
+            if (emptyStateValue) {
+              Object.defineProperty(Component.prototype, 'state', {
+                configurable: true,
+                enumerable: true,
+                get() {
+                  return null;
+                },
+                set(value) {
+                  if (value !== emptyStateValue) {
+                    Object.defineProperty(this, 'state', {
+                      configurable: true,
+                      enumerable: true,
+                      value,
+                      writable: true,
+                    });
+                  }
+                  return true;
+                },
+              });
+            }
+          }
           return withSetStateAllowed(() => renderer.render(el, context));
         }
       },

diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
@@ -226,6 +226,22 @@ const eventOptions = {
   auxClick: !!TestUtils.Simulate.auxClick, // 16.5+
 };
 
+function getEmptyStateValue() {
+  // this handles a bug in React 16.0 - 16.2
+  // see https://github.com/facebook/react/commit/39be83565c65f9c522150e52375167568a2a1459
+  // also see https://github.com/facebook/react/pull/11965
+
+  // eslint-disable-next-line react/prefer-stateless-function
+  class EmptyState extends React.Component {
+    render() {
+      return null;
+    }
+  }
+  const testRenderer = new ShallowRenderer();
+  testRenderer.render(React.createElement(EmptyState));
+  return testRenderer._instance.state;
+}
+
 class ReactSixteenAdapter extends EnzymeAdapter {
   constructor() {
     super();
@@ -341,6 +357,30 @@ class ReactSixteenAdapter extends EnzymeAdapter {
             );
             return withSetStateAllowed(() => renderer.render({ ...el, type: wrappedEl }, context));
           }
+          if (isStateful) {
+            // fix react bug; see implementation of `getEmptyStateValue`
+            const emptyStateValue = getEmptyStateValue();
+            if (emptyStateValue) {
+              Object.defineProperty(Component.prototype, 'state', {
+                configurable: true,
+                enumerable: true,
+                get() {
+                  return null;
+                },
+                set(value) {
+                  if (value !== emptyStateValue) {
+                    Object.defineProperty(this, 'state', {
+                      configurable: true,
+                      enumerable: true,
+                      value,
+                      writable: true,
+                    });
+                  }
+                  return true;
+                },
+              });
+            }
+          }
           return withSetStateAllowed(() => renderer.render(el, context));
         }
       },

diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -139,6 +139,30 @@ describeWithDOM('mount', () => {
       expect(() => mount(<Foo />)).not.to.throw();
     });
 
+    it('starts out with undefined state', () => {
+      class Foo extends React.Component {
+        render() {
+          return (
+            <div>
+              {typeof this.state}
+              {JSON.stringify(this.state)}
+            </div>
+          );
+        }
+      }
+
+      const wrapper = mount(<Foo />);
+      expect(wrapper.state()).to.equal(null);
+      expect(wrapper.debug()).to.equal(`
+<Foo>
+  <div>
+    object
+    null
+  </div>
+</Foo>
+      `.trim());
+    });
+
     describeIf(is('>= 16.3'), 'uses the isValidElementType from the Adapter to validate the prop type of Component', () => {
       const Foo = () => null;
       const Bar = () => null;

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -132,6 +132,28 @@ describe('shallow', () => {
 
       expect(() => shallow(<Foo />)).not.to.throw();
     });
+
+    it('starts out with undefined state', () => {
+      class Foo extends React.Component {
+        render() {
+          return (
+            <div>
+              {typeof this.state}
+              {JSON.stringify(this.state)}
+            </div>
+          );
+        }
+      }
+
+      const wrapper = shallow(<Foo />);
+      expect(wrapper.state()).to.equal(null);
+      expect(wrapper.debug()).to.equal(`
+<div>
+  object
+  null
+</div>
+      `.trim());
+    });
   });
 
   describe('context', () => {