[enzyme-adapter-react-16] [fix] shallow: SFCs do not get a this

Fixes #1683
enzymejs · Jul 2, 2018 · e0bcdf7 · e0bcdf7
1 parent 2345755
commit e0bcdf7
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 0 deletions.
diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
@@ -232,6 +232,18 @@ class ReactSixteenAdapter extends EnzymeAdapter {
           isDOM = true;
         } else {
           isDOM = false;
+          const { type: Component } = el;
+          const isStateful = Component.prototype && (
+            Component.prototype.isReactComponent
+            || Array.isArray(Component.__reactAutoBindPairs) // fallback for createClass components
+          );
+          if (!isStateful) {
+            const wrappedEl = Object.assign(
+              (...args) => Component(...args), // eslint-disable-line new-cap
+              Component,
+            );
+            return withSetStateAllowed(() => renderer.render({ ...el, type: wrappedEl }, context));
+          }
           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
@@ -21,6 +21,7 @@ import {
 } from './_helpers';
 import { REACT013, REACT014, REACT16, REACT163, is } from './_helpers/version';
 import realArrowFunction from './_helpers/realArrowFunction';
+import sloppyReturnThis from './_helpers/untranspiledSloppyReturnThis';
 
 const getElementPropSelector = prop => x => x.props[prop];
 const getWrapperPropSelector = prop => x => x.prop(prop);
@@ -2057,6 +2058,49 @@ describeWithDOM('mount', () => {
 
         expect(wrapper.props()).to.eql({ bar: 'bye', foo: 'hi' });
       });
+
+      const SloppyReceiver = sloppyReturnThis((
+        receiver,
+        props = { NO_PROPS: true },
+        context,
+      ) => (
+        <div
+          data-is-global={receiver === global}
+          data-is-undefined={typeof receiver === 'undefined'}
+          {...props}
+          {...context}
+        />
+      ));
+
+      const StrictReceiver = function SFC(
+        props = { NO_PROPS: true },
+        context,
+      ) {
+        return (
+          <div
+            data-is-global={this === global}
+            data-is-undefined={typeof this === 'undefined'}
+            {...props}
+            {...context}
+          />
+        );
+      };
+
+      it('does not provide a `this` to a sloppy-mode SFC', () => {
+        const wrapper = mount(<SloppyReceiver />);
+        expect(wrapper.childAt(0).props()).to.be.an('object').that.has.all.keys({
+          'data-is-global': true,
+          'data-is-undefined': false,
+        });
+      });
+
+      it('does not provide a `this` to a strict-mode SFC', () => {
+        const wrapper = mount(<StrictReceiver />);
+        expect(wrapper.childAt(0).props()).to.be.an('object').that.has.all.keys({
+          'data-is-global': false,
+          'data-is-undefined': true,
+        });
+      });
     });
   });
 

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -9,6 +9,7 @@ import './_helpers/setupAdapters';
 import { createClass, createContext } from './_helpers/react-compat';
 import { describeIf, itIf, itWithData, generateEmptyRenderData } from './_helpers';
 import { REACT013, REACT014, REACT15, REACT150_4, REACT16, REACT163, is } from './_helpers/version';
+import sloppyReturnThis from './_helpers/untranspiledSloppyReturnThis';
 
 // The shallow renderer in react 16 does not yet support batched updates. When it does,
 // we should be able to go un-skip all of the tests that are skipped with this flag.
@@ -1826,6 +1827,49 @@ describe('shallow', () => {
 
         expect(wrapper.props()).to.eql({ className: 'bye', id: 'hi' });
       });
+
+      const SloppyReceiver = sloppyReturnThis((
+        receiver,
+        props = { NO_PROPS: true },
+        context,
+      ) => (
+        <div
+          data-is-global={receiver === global}
+          data-is-undefined={typeof receiver === 'undefined'}
+          {...props}
+          {...context}
+        />
+      ));
+
+      const StrictReceiver = function SFC(
+        props = { NO_PROPS: true },
+        context,
+      ) {
+        return (
+          <div
+            data-is-global={this === global}
+            data-is-undefined={typeof this === 'undefined'}
+            {...props}
+            {...context}
+          />
+        );
+      };
+
+      it('does not provide a `this` to a sloppy-mode SFC', () => {
+        const wrapper = shallow(<SloppyReceiver />);
+        expect(wrapper.props()).to.be.an('object').that.has.all.keys({
+          'data-is-global': true,
+          'data-is-undefined': false,
+        });
+      });
+
+      it('does not provide a `this` to a strict-mode SFC', () => {
+        const wrapper = shallow(<StrictReceiver />);
+        expect(wrapper.props()).to.be.an('object').that.has.all.keys({
+          'data-is-global': false,
+          'data-is-undefined': true,
+        });
+      });
     });
   });
 

diff --git a/packages/enzyme-test-suite/test/_helpers/untranspiledSloppyReturnThis.js b/packages/enzyme-test-suite/test/_helpers/untranspiledSloppyReturnThis.js
@@ -0,0 +1,10 @@
+/* eslint
+  prefer-spread: 0,
+  func-names: 0,
+  prefer-rest-params: 0,
+*/
+module.exports = function (fn) {
+  return function () {
+    return fn.apply(null, [this].concat(Array.prototype.slice.call(arguments)));
+  };
+};