Update test renderer to support new types of work (#12237)
Adds support for ContextProvider, ContextConsumer, and Mode.
Andrew Clark committed
Feb 16, 2018 at 11:27 UTC
e68c0164aa92ed383a0060639d9c449e2f740fb5
2 files changed
+83
packages/react-test-renderer/src/ReactTestRenderer.js
+9
@@ -22,6 +22,9 @@ import {
22
HostPortal,
23
HostText,
24
HostRoot,
25
+ ContextConsumer,
26
+ ContextProvider,
27
+ Mode,
28
} from 'shared/ReactTypeOfWork';
29
import invariant from 'fbjs/lib/invariant';
30
@@ -366,6 +369,9 @@ function toTree(node: ?Fiber) {
369
case HostText:
370
return node.stateNode.text;
371
case Fragment:
372
+ case ContextProvider:
373
+ case ContextConsumer:
374
+ case Mode:
375
return childrenToTree(node.child);
376
default:
377
invariant(
@@ -463,6 +469,9 @@ class ReactTestInstance {
469
children.push('' + node.memoizedProps);
470
break;
471
case Fragment:
472
+ case ContextProvider:
473
+ case ContextConsumer:
474
+ case Mode:
475
descend = true;
476
break;
477
default:
packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js
+74
@@ -879,4 +879,78 @@ describe('ReactTestRenderer', () => {
879
'world',
880
]);
881
});
882
+
883
+ it('supports context providers and consumers', () => {
884
+ const {Consumer, Provider} = React.createContext('a');
885
+
886
+ function Child(props) {
887
+ return props.value;
888
+ }
889
+
890
+ function App() {
891
+ return (
892
+ <Provider value="b">
893
+ <Consumer>{value => <Child value={value} />}</Consumer>
894
+ </Provider>
895
+ );
896
+ }
897
+
898
+ const renderer = ReactTestRenderer.create(<App />);
899
+ const child = renderer.root.findByType(Child);
900
+ expect(child.children).toEqual(['b']);
901
+ expect(prettyFormat(renderer.toTree())).toEqual(
902
+ prettyFormat({
903
+ instance: null,
904
+ nodeType: 'component',
905
+ props: {},
906
+ rendered: {
907
+ instance: null,
908
+ nodeType: 'component',
909
+ props: {
910
+ value: 'b',
911
+ },
912
+ rendered: 'b',
913
+ type: Child,
914
+ },
915
+ type: App,
916
+ }),
917
+ );
918
+ });
919
+
920
+ it('supports modes', () => {
921
+ function Child(props) {
922
+ return props.value;
923
+ }
924
+
925
+ function App(props) {
926
+ return (
927
+ <React.StrictMode>
928
+ <Child value={props.value} />
929
+ </React.StrictMode>
930
+ );
931
+ }
932
+
933
+ const renderer = ReactTestRenderer.create(<App value="a" />);
934
+ const child = renderer.root.findByType(Child);
935
+ expect(child.children).toEqual(['a']);
936
+ expect(prettyFormat(renderer.toTree())).toEqual(
937
+ prettyFormat({
938
+ instance: null,
939
+ nodeType: 'component',
940
+ props: {
941
+ value: 'a',
942
+ },
943
+ rendered: {
944
+ instance: null,
945
+ nodeType: 'component',
946
+ props: {
947
+ value: 'a',
948
+ },
949
+ rendered: 'a',
950
+ type: Child,
951
+ },
952
+ type: App,
953
+ }),
954
+ );
955
+ });
956
});