Add createComponentMock option to test renderer

Author: lelandrichardson

scripts/fiber/tests-passing.txt

@@ -1690,6 +1690,8 @@ src/renderers/testing/__tests__/ReactTestRenderer-test.js
 * toTree() renders complicated trees of composites and hosts
 * can update text nodes when rendered as root
 * can render and update root fragments
+* allows createComponentMock option to be passed in, simulating shallow
+* createComponentMock can mock out specific components
 
 src/shared/utils/__tests__/KeyEscapeUtils-test.js
 * should properly escape and wrap user defined keys

src/renderers/shared/fiber/ReactFiberBeginWork.js

@@ -92,12 +92,17 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
     resumeMountClassInstance,
     updateClassInstance,
   } = ReactFiberClassComponent(
+    config,
+    hostContext,
     scheduleUpdate,
     getPriorityContext,
     memoizeProps,
     memoizeState,
   );
 
+  var hasMockingBehavior = typeof config.mockComponent === 'function';
+  var mockComponent = config.mockComponent || (c => c.type);
+
   function markChildAsProgressed(current, workInProgress, priorityLevel) {
     // We now have clones. Let's store them as the currently progressed work.
     workInProgress.progressedChild = workInProgress.child;
@@ -200,7 +205,9 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
   }
 
   function updateFunctionalComponent(current, workInProgress) {
-    var fn = workInProgress.type;
+    var fn = hasMockingBehavior
+      ? mockComponent(workInProgress, hostContext.getRootHostContainer())
+      : workInProgress.type;
     var nextProps = workInProgress.pendingProps;
 
     const memoizedProps = workInProgress.memoizedProps;
@@ -450,7 +457,9 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
       'An indeterminate component should never have mounted. This error is ' +
       'likely caused by a bug in React. Please file an issue.'
     );
-    var fn = workInProgress.type;
+    var fn = hasMockingBehavior
+      ? mockComponent(workInProgress, hostContext.getRootHostContainer())
+      : workInProgress.type;
     var props = workInProgress.pendingProps;
     var unmaskedContext = getUnmaskedContext(workInProgress);
     var context = getMaskedContext(workInProgress, unmaskedContext);

src/renderers/shared/fiber/ReactFiberClassComponent.js

@@ -14,6 +14,8 @@
 
 import type { Fiber } from 'ReactFiber';
 import type { PriorityLevel } from 'ReactPriorityLevel';
+import type { HostConfig } from 'ReactFiberReconciler';
+import type { HostContext } from 'ReactFiberHostContext';
 
 var {
   Update,
@@ -40,13 +42,18 @@ var invariant = require('invariant');
 
 const isArray = Array.isArray;
 
-module.exports = function(
+module.exports = function<T, P, I, TI, PI, C, CX, PL>(
+  config : HostConfig<T, P, I, TI, PI, C, CX, PL>,
+  hostContext : HostContext<C, CX>,
   scheduleUpdate : (fiber : Fiber, priorityLevel : PriorityLevel) => void,
   getPriorityContext : () => PriorityLevel,
   memoizeProps: (workInProgress : Fiber, props : any) => void,
   memoizeState: (workInProgress : Fiber, state : any) => void,
 ) {
 
+  const hasMockingBehavior = typeof config.mockComponent === 'function';
+  const mockComponent = config.mockComponent || (c => c.type);
+
   // Class component state updater
   const updater = {
     isMounted,
@@ -232,7 +239,9 @@ module.exports = function(
   }
 
   function constructClassInstance(workInProgress : Fiber) : any {
-    const ctor = workInProgress.type;
+    const ctor = hasMockingBehavior
+      ? mockComponent(workInProgress, hostContext.getRootHostContainer())
+      : workInProgress.type;
     const props = workInProgress.pendingProps;
     const unmaskedContext = getUnmaskedContext(workInProgress);
     const needsContext = isContextConsumer(workInProgress);

src/renderers/shared/fiber/ReactFiberReconciler.js

@@ -100,6 +100,8 @@ export type HostConfig<T, P, I, TI, PI, C, CX, PL> = {
   resetAfterCommit() : void,
 
   useSyncScheduling ?: boolean,
+
+  mockComponent ?: Function,
 };
 
 export type Reconciler<C, I, TI> = {

src/renderers/testing/ReactTestRendererFiber.js

@@ -22,6 +22,7 @@ var {
   FunctionalComponent,
   ClassComponent,
   HostComponent,
+  Fragment,
   HostText,
   HostRoot,
 } = ReactTypeOfWork;
@@ -41,6 +42,7 @@ type ReactTestRendererNode = ReactTestRendererJSON | string;
 type Container = {|
   children : Array<Instance | TextInstance>,
   createNodeMock : Function,
+  createComponentMock: Function,
   tag : 'CONTAINER',
 |};
 
@@ -200,6 +202,16 @@ var TestRenderer = ReactFiberReconciler({
     setTimeout(fn, 0, {timeRemaining: Infinity});
   },
 
+  mockComponent(component: Fiber, rootContainer: Container) : any {
+    const mockedFn = rootContainer.createComponentMock(component);
+    invariant(
+      typeof mockedFn === 'function',
+      'createComponentMock() must return a function. Found %s instead.',
+      typeof mockedFn
+    );
+    return mockedFn;
+  },
+
   useSyncScheduling: true,
 
   getPublicInstance(inst) {
@@ -220,6 +232,9 @@ var defaultTestOptions = {
   createNodeMock: function() {
     return null;
   },
+  createComponentMock: function(component: Fiber) {
+    return component.type;
+  },
 };
 
 function toJSON(inst : Instance | TextInstance) : ReactTestRendererNode {
@@ -258,6 +273,39 @@ function nodeAndSiblingsArray(nodeWithSibling: ?Fiber) {
   return array;
 }
 
+function childrenToTree(node) {
+  if (!node) {
+    return null;
+  }
+  const children = nodeAndSiblingsArray(node);
+  if (children.length === 0) {
+    return null;
+  } else if (children.length === 1) {
+    return toTree(children[0]);
+  } else {
+    return flatten(children.map(toTree));
+  }
+}
+
+function flatten(arr) {
+  const result = [];
+  const stack = [{ i: 0, array: arr }];
+  while (stack.length) {
+    let n = stack.pop();
+    while (n.i < n.array.length) {
+      const el = n.array[n.i];
+      n.i += 1;
+      if (Array.isArray(el)) {
+        stack.push(n);
+        stack.push({ i: 0, array: el });
+        break;
+      }
+      result.push(el);
+    }
+  }
+  return result;
+}
+
 function toTree(node: ?Fiber) {
   if (node == null) {
     return null;
@@ -271,23 +319,25 @@ function toTree(node: ?Fiber) {
         type: node.type,
         props: { ...node.memoizedProps },
         instance: node.stateNode,
-        rendered: toTree(node.child),
+        rendered: childrenToTree(node.child),
       };
+    case Fragment: // 10
+      return childrenToTree(node.child);
     case FunctionalComponent: // 1
       return {
         nodeType: 'component',
         type: node.type,
         props: { ...node.memoizedProps },
         instance: null,
-        rendered: toTree(node.child),
+        rendered: childrenToTree(node.child),
       };
     case HostComponent: // 5
       return {
         nodeType: 'host',
         type: node.type,
         props: { ...node.memoizedProps },
         instance: null, // TODO: use createNodeMock here somehow?
-        rendered: nodeAndSiblingsArray(node.child).map(toTree),
+        rendered: flatten(nodeAndSiblingsArray(node.child).map(toTree)),
       };
     case HostText: // 6
       return node.stateNode.text;
@@ -306,9 +356,14 @@ var ReactTestFiberRenderer = {
     if (options && typeof options.createNodeMock === 'function') {
       createNodeMock = options.createNodeMock;
     }
+    var createComponentMock = defaultTestOptions.createComponentMock;
+    if (options && typeof options.createComponentMock === 'function') {
+      createComponentMock = options.createComponentMock;
+    }
     var container = {
       children: [],
       createNodeMock,
+      createComponentMock,
       tag: 'CONTAINER',
     };
     var root: ?FiberRoot = TestRenderer.createContainer(container);