Add Profiler component for collecting new render timing info (#12745)

Add a new component type, Profiler, that can be used to collect new render time metrics. Since this is a new, experimental API, it will be exported as React.unstable_Profiler initially.

Most of the functionality for this component has been added behind a feature flag, enableProfileModeMetrics. When the feature flag is disabled, the component will just render its children with no additional behavior. When the flag is enabled, React will also collect timing information and pass it to the onRender function (as described below).

Author: bvaughn

src/ReactTestRenderer.js

@@ -27,6 +27,7 @@ import {
   ContextProvider,
   Mode,
   ForwardRef,
+  Profiler,
 } from 'shared/ReactTypeOfWork';
 import invariant from 'fbjs/lib/invariant';
 
@@ -119,7 +120,7 @@ function removeChild(
 }
 
 // Current virtual time
-let currentTime: number = 0;
+let nowImplementation = () => 0;
 let scheduledCallback: ((deadline: Deadline) => mixed) | null = null;
 let yieldedValues: Array<mixed> | null = null;
 
@@ -221,9 +222,9 @@ const TestRenderer = ReactFiberReconciler({
 
   getPublicInstance,
 
-  now(): number {
-    return currentTime;
-  },
+  // This approach enables `now` to be mocked by tests,
+  // Even after the reconciler has initialized and read host config values.
+  now: () => nowImplementation(),
 
   mutation: {
     commitUpdate(
@@ -383,6 +384,7 @@ function toTree(node: ?Fiber) {
     case ContextProvider:
     case ContextConsumer:
     case Mode:
+    case Profiler:
     case ForwardRef:
       return childrenToTree(node.child);
     default:
@@ -486,6 +488,7 @@ class ReactTestInstance {
         case ContextProvider:
         case ContextConsumer:
         case Mode:
+        case Profiler:
           descend = true;
           break;
         default:
@@ -737,7 +740,11 @@ const ReactTestRendererFiber = {
         }
         return TestRenderer.getPublicRootInstance(root);
       },
-      unstable_flushSync: TestRenderer.flushSync,
+      unstable_flushSync(fn: Function) {
+        yieldedValues = [];
+        TestRenderer.flushSync(fn);
+        return yieldedValues;
+      },
     };
 
     Object.defineProperty(
@@ -761,6 +768,10 @@ const ReactTestRendererFiber = {
   /* eslint-disable camelcase */
   unstable_batchedUpdates: batchedUpdates,
   /* eslint-enable camelcase */
+
+  unstable_setNowImplementation(implementation: () => number): void {
+    nowImplementation = implementation;
+  },
 };
 
 export default ReactTestRendererFiber;

src/__tests__/ReactShallowRenderer-test.js

@@ -230,6 +230,32 @@ describe('ReactShallowRenderer', () => {
     ]);
   });
 
+  it('should handle Profiler', () => {
+    class SomeComponent extends React.Component {
+      render() {
+        return (
+          <React.unstable_Profiler id="test" onRender={jest.fn()}>
+            <div>
+              <span className="child1" />
+              <span className="child2" />
+            </div>
+          </React.unstable_Profiler>
+        );
+      }
+    }
+
+    const shallowRenderer = createRenderer();
+    const result = shallowRenderer.render(<SomeComponent />);
+
+    expect(result.type).toBe(React.unstable_Profiler);
+    expect(result.props.children).toEqual(
+      <div>
+        <span className="child1" />
+        <span className="child2" />
+      </div>,
+    );
+  });
+
   it('should enable shouldComponentUpdate to prevent a re-render', () => {
     let renderCounter = 0;
     class SimpleComponent extends React.Component {

src/__tests__/ReactTestRendererTraversal-test.js

@@ -37,7 +37,9 @@ describe('ReactTestRendererTraversal', () => {
               <View void="void" />
               <View void="void" />
             </ExampleNull>
-            <ExampleForwardRef qux="qux" />
+            <React.unstable_Profiler id="test" onRender={() => {}}>
+              <ExampleForwardRef qux="qux" />
+            </React.unstable_Profiler>
           </View>
         </View>
       );