Update test renderer to support new types of work (#12237)

Adds support for ContextProvider, ContextConsumer, and Mode.
facebook · Feb 16, 2018 · e68c016 · e68c016
1 parent 93ce76b
commit e68c016
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 0 deletions.
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -22,6 +22,9 @@ import {
   HostPortal,
   HostText,
   HostRoot,
+  ContextConsumer,
+  ContextProvider,
+  Mode,
 } from 'shared/ReactTypeOfWork';
 import invariant from 'fbjs/lib/invariant';
 
@@ -366,6 +369,9 @@ function toTree(node: ?Fiber) {
     case HostText:
       return node.stateNode.text;
     case Fragment:
+    case ContextProvider:
+    case ContextConsumer:
+    case Mode:
       return childrenToTree(node.child);
     default:
       invariant(
@@ -463,6 +469,9 @@ class ReactTestInstance {
           children.push('' + node.memoizedProps);
           break;
         case Fragment:
+        case ContextProvider:
+        case ContextConsumer:
+        case Mode:
           descend = true;
           break;
         default:

diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js
@@ -879,4 +879,78 @@ describe('ReactTestRenderer', () => {
       'world',
     ]);
   });
+
+  it('supports context providers and consumers', () => {
+    const {Consumer, Provider} = React.createContext('a');
+
+    function Child(props) {
+      return props.value;
+    }
+
+    function App() {
+      return (
+        <Provider value="b">
+          <Consumer>{value => <Child value={value} />}</Consumer>
+        </Provider>
+      );
+    }
+
+    const renderer = ReactTestRenderer.create(<App />);
+    const child = renderer.root.findByType(Child);
+    expect(child.children).toEqual(['b']);
+    expect(prettyFormat(renderer.toTree())).toEqual(
+      prettyFormat({
+        instance: null,
+        nodeType: 'component',
+        props: {},
+        rendered: {
+          instance: null,
+          nodeType: 'component',
+          props: {
+            value: 'b',
+          },
+          rendered: 'b',
+          type: Child,
+        },
+        type: App,
+      }),
+    );
+  });
+
+  it('supports modes', () => {
+    function Child(props) {
+      return props.value;
+    }
+
+    function App(props) {
+      return (
+        <React.StrictMode>
+          <Child value={props.value} />
+        </React.StrictMode>
+      );
+    }
+
+    const renderer = ReactTestRenderer.create(<App value="a" />);
+    const child = renderer.root.findByType(Child);
+    expect(child.children).toEqual(['a']);
+    expect(prettyFormat(renderer.toTree())).toEqual(
+      prettyFormat({
+        instance: null,
+        nodeType: 'component',
+        props: {
+          value: 'a',
+        },
+        rendered: {
+          instance: null,
+          nodeType: 'component',
+          props: {
+            value: 'a',
+          },
+          rendered: 'a',
+          type: Child,
+        },
+        type: App,
+      }),
+    );
+  });
 });