[enzyme-adapter-react-16] [new] Add support for wrapping Profiler

packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js

@@ -216,6 +216,7 @@ function toTree(vnode) {
     case FiberTags.ContextProvider:
     case FiberTags.ContextConsumer:
       return childrenToTree(node.child);
+    case FiberTags.Profiler:
     case FiberTags.ForwardRef: {
       return {
         nodeType: 'function',

packages/enzyme-adapter-react-16/src/detectFiberTags.js

@@ -19,6 +19,7 @@ module.exports = function detectFiberTags() {
   const supportsContext = typeof React.createContext !== 'undefined';
   const supportsForwardRef = typeof React.forwardRef !== 'undefined';
   const supportsMemo = typeof React.memo !== 'undefined';
+  const supportsProfiler = typeof React.unstable_Profiler !== 'undefined';
 
   function Fn() {
     return null;
@@ -66,5 +67,8 @@ module.exports = function detectFiberTags() {
     ForwardRef: supportsForwardRef
       ? getFiber(React.createElement(FwdRef)).tag
       : -1,
+    Profiler: supportsProfiler
+      ? getFiber(React.createElement(React.unstable_Profiler, { id: 'mock', onRender: () => {} })).tag
+      : -1,
   };
 };

packages/enzyme-test-suite/test/ReactWrapper-spec.jsx

@@ -24,6 +24,7 @@ import {
   Fragment,
   forwardRef,
   memo,
+  Profiler,
   PureComponent,
   useEffect,
   useState,
@@ -844,6 +845,122 @@ describeWithDOM('mount', () => {
     });
   });
 
+  describeIf(is('>= 16.4'), 'Profiler', () => {
+    function SomeComponent() {
+      return (
+        <Profiler id="SomeComponent" onRender={() => {}}>
+          <main>
+            <div className="child" />
+          </main>
+        </Profiler>
+      );
+    }
+
+    wrap()
+      .withConsoleThrows()
+      .it('mounts without complaint', () => {
+        expect(() => mount(<SomeComponent />)).not.to.throw();
+      });
+
+    it('renders', () => {
+      const wrapper = mount(<SomeComponent />);
+      expect(wrapper.debug()).to.equal(`<SomeComponent>
+  <Profiler id="SomeComponent" onRender={[Function: onRender]}>
+    <main>
+      <div className="child" />
+    </main>
+  </Profiler>
+</SomeComponent>`);
+    });
+
+    it('finds elements through Profiler elements', () => {
+      const wrapper = mount(<SomeComponent />);
+
+      expect(wrapper.find('.child')).to.have.lengthOf(1);
+    });
+
+    it('finds Profiler element', () => {
+      const Parent = () => <span><SomeComponent foo="hello" /></span>;
+
+      const wrapper = mount(<Parent foo="hello" />);
+      const results = wrapper.find(SomeComponent);
+
+      expect(results).to.have.lengthOf(1);
+      expect(results.type()).to.equal(SomeComponent);
+      expect(results.props()).to.eql({ foo: 'hello' });
+    });
+
+    it('can find Profiler by id', () => {
+      const wrapper = mount(<SomeComponent />);
+      expect(wrapper.find('[id="SomeComponent"]').exists()).to.equal(true);
+    });
+
+    it('can find Profiler by display name', () => {
+      const wrapper = mount(<SomeComponent />);
+      const profiler = wrapper.find('Profiler');
+      expect(profiler).to.have.lengthOf(1);
+      expect(profiler.type()).to.equal(Profiler);
+    });
+
+    it('recognizes render phases', () => {
+      const handleRender = sinon.spy();
+      function AnotherComponent() {
+        return (
+          <Profiler id="AnotherComponent" onRender={handleRender}>
+            <div />
+          </Profiler>
+        );
+      }
+
+      const wrapper = mount(<AnotherComponent />);
+      expect(handleRender).to.have.property('callCount', 1);
+      expect(handleRender.args[0][1]).to.equal('mount');
+
+      wrapper.setProps({ unusedProp: true });
+      expect(handleRender).to.have.property('callCount', 2);
+      expect(handleRender.args[1][1]).to.equal('update');
+    });
+
+    it('measures timings', () => {
+      /**
+       * test environment has no access to the performance API at which point
+       * the profiling API has to fallback to Date.now() which isn't precise enough
+       * which results in 0 duration for these simple examples most of the time.
+       * With performance API it should test for greaterThan(0) instead of least(0)
+       */
+      const handleRender = sinon.spy();
+      function AnotherComponent() {
+        return (
+          <Profiler id="AnotherComponent" onRender={handleRender}>
+            <div />
+          </Profiler>
+        );
+      }
+
+      const wrapper = mount(<AnotherComponent />);
+      expect(handleRender).to.have.property('callCount', 1);
+      const [firstArgs] = handleRender.args;
+      if (typeof performance === 'undefined') {
+        expect(firstArgs[2]).to.be.least(0);
+        expect(firstArgs[3]).to.be.least(0);
+      } else {
+        expect(firstArgs[2]).to.be.greaterThan(0);
+        expect(firstArgs[3]).to.be.greaterThan(0);
+      }
+
+      wrapper.setProps({ unusedProp: true });
+      expect(handleRender).to.have.property('callCount', 2);
+      const [, secondArgs] = handleRender.args;
+      if (typeof performance === 'undefined') {
+        expect(secondArgs[2]).to.be.least(0);
+        expect(secondArgs[3]).to.be.least(0);
+      } else {
+        expect(secondArgs[2]).to.be.greaterThan(0);
+        expect(secondArgs[3]).to.be.greaterThan(0);
+      }
+    });
+  });
+
   describeIf(is('>= 16.8'), 'hooks', () => {
     it('works with `useEffect`', (done) => {
       function ComponentUsingEffectHook() {

packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx

@@ -25,6 +25,7 @@ import {
   PureComponent,
   useEffect,
   useState,
+  Profiler,
 } from './_helpers/react-compat';
 import {
   describeIf,
@@ -1007,6 +1008,122 @@ describe('shallow', () => {
     });
   });
 
+  describeIf(is('>= 16.4'), 'Profiler', () => {
+    function SomeComponent() {
+      return (
+        <Profiler id="SomeComponent" onRender={() => {}}>
+          <main>
+            <div className="child" />
+          </main>
+        </Profiler>
+      );
+    }
+
+    wrap()
+      .withConsoleThrows()
+      .it('mounts without complaint', () => {
+        expect(() => shallow(<SomeComponent />)).not.to.throw();
+      });
+
+    it('renders', () => {
+      const wrapper = shallow(<SomeComponent />);
+      expect(wrapper.debug()).to.equal(`<Profiler id="SomeComponent" onRender={[Function: onRender]}>
+  <main>
+    <div className="child" />
+  </main>
+</Profiler>`);
+    });
+
+    it('finds elements through Profiler elements', () => {
+      const wrapper = shallow(<SomeComponent />);
+
+      expect(wrapper.find('.child')).to.have.lengthOf(1);
+    });
+
+    it('finds Profiler element', () => {
+      const Parent = () => <span><SomeComponent foo="hello" /></span>;
+
+      const wrapper = shallow(<Parent foo="hello" />);
+      const results = wrapper.find(SomeComponent);
+
+      expect(results).to.have.lengthOf(1);
+      expect(results.type()).to.equal(SomeComponent);
+      expect(results.props()).to.eql({ foo: 'hello' });
+    });
+
+    it('can find Profiler by id', () => {
+      const wrapper = shallow(<SomeComponent />);
+      expect(wrapper.find('[id="SomeComponent"]').exists()).to.equal(true);
+    });
+
+    it('can find Profiler by display name', () => {
+      const wrapper = shallow(<SomeComponent />);
+      const profiler = wrapper.find('Profiler');
+      expect(profiler).to.have.lengthOf(1);
+      expect(profiler.type()).to.equal(Profiler);
+    });
+
+    // TODO: enable when Profiler is no longer unstable
+    it.skip('recognizes render phases', () => {
+      const handleRender = sinon.spy();
+      function AnotherComponent() {
+        return (
+          <Profiler id="AnotherComponent" onRender={handleRender}>
+            <div />
+          </Profiler>
+        );
+      }
+
+      const wrapper = shallow(<AnotherComponent />);
+      expect(handleRender).to.have.property('callCount', 1);
+      expect(handleRender.args[0][1]).to.equal('mount');
+
+      wrapper.setProps({ unusedProp: true });
+      expect(handleRender).to.have.property('callCount', 2);
+      expect(handleRender.args[1][1]).to.equal('update');
+    });
+
+    // TODO: enable when Profiler is no longer unstable
+    it.skip('measures timings', () => {
+      /**
+       * test environment has no access to the performance API at which point
+       * the profiling API has to fallback to Date.now() which isn't precise enough
+       * which results in 0 duration for these simple examples most of the time.
+       * With performance API it should test for greaterThan(0) instead of least(0)
+       */
+      const handleRender = sinon.spy();
+      function AnotherComponent() {
+        return (
+          <Profiler id="AnotherComponent" onRender={handleRender}>
+            <div />
+          </Profiler>
+        );
+      }
+
+      const wrapper = shallow(<AnotherComponent />);
+      expect(handleRender).to.have.property('callCount', 1);
+      const [firstArgs] = handleRender.args;
+      if (typeof performance === 'undefined') {
+        expect(firstArgs[2]).to.be.least(0);
+        expect(firstArgs[3]).to.be.least(0);
+      } else {
+        expect(firstArgs[2]).to.be.greaterThan(0);
+        expect(firstArgs[3]).to.be.greaterThan(0);
+      }
+
+      wrapper.setProps({ unusedProp: true });
+      expect(handleRender).to.have.property('callCount', 2);
+      const [, secondArgs] = handleRender.args;
+      if (typeof performance === 'undefined') {
+        expect(secondArgs[2]).to.be.least(0);
+        expect(secondArgs[3]).to.be.least(0);
+      } else {
+        expect(secondArgs[2]).to.be.greaterThan(0);
+        expect(secondArgs[3]).to.be.greaterThan(0);
+      }
+    });
+  });
+
   describeIf(is('>= 16.8.5'), 'hooks', () => {
     // TODO: enable when the shallow renderer fixes its bug
     it.skip('works with `useEffect`', (done) => {