Add test coverage for readContext() on the server (#14649)

gaearon · web-flow · commit fe2ecd276e9b · 2019-01-21T19:55:26.000Z
* Rename context variables

I just spent half an hour debugging why readContext(PurpleContext) doesn't work.

* Add test coverage for readContext() on the server
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
@@ -37,9 +37,9 @@ describe('ReactDOMServerIntegration', () => {
 });
 
 describe('context', function() {
- let PurpleContext, RedContext, Consumer;
+ let Context, PurpleContextProvider, RedContextProvider, Consumer;
 beforeEach(() => {
- let Context = React.createContext('none');
+ Context = React.createContext('none');
 
 class Parent extends React.Component {
 render() {
@@ -51,8 +51,12 @@ describe('ReactDOMServerIntegration', () => {
 }
 }
 Consumer = Context.Consumer;
- PurpleContext = props => <Parent text="purple">{props.children}</Parent>;
- RedContext = props => <Parent text="red">{props.children}</Parent>;
+ PurpleContextProvider = props => (
+ <Parent text="purple">{props.children}</Parent>
+ );
+ RedContextProvider = props => (
+ <Parent text="red">{props.children}</Parent>
+ );
 });
 
 itRenders('class child with context', async render => {
@@ -67,9 +71,9 @@ describe('ReactDOMServerIntegration', () => {
 }
 
 const e = await render(
- <PurpleContext>
+ <PurpleContextProvider>
 <ClassChildWithContext />
- </PurpleContext>,
+ </PurpleContextProvider>,
 );
 expect(e.textContent).toBe('purple');
 });
@@ -80,9 +84,9 @@ describe('ReactDOMServerIntegration', () => {
 }
 
 const e = await render(
- <PurpleContext>
+ <PurpleContextProvider>
 <FunctionChildWithContext />
- </PurpleContext>,
+ </PurpleContextProvider>,
 );
 expect(e.textContent).toBe('purple');
 });
@@ -127,9 +131,9 @@ describe('ReactDOMServerIntegration', () => {
 const Child = props => <Grandchild />;
 
 const e = await render(
- <PurpleContext>
+ <PurpleContextProvider>
 <Child />
- </PurpleContext>,
+ </PurpleContextProvider>,
 );
 expect(e.textContent).toBe('purple');
 });
@@ -144,15 +148,54 @@ describe('ReactDOMServerIntegration', () => {
 };
 
 const e = await render(
- <PurpleContext>
- <RedContext>
+ <PurpleContextProvider>
+ <RedContextProvider>
 <Grandchild />
- </RedContext>
- </PurpleContext>,
+ </RedContextProvider>
+ </PurpleContextProvider>,
 );
 expect(e.textContent).toBe('red');
 });
 
+ itRenders('readContext() in different components', async render => {
+ function readContext(Ctx, observedBits) {
+ const dispatcher =
+ React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+ .ReactCurrentDispatcher.current;
+ return dispatcher.readContext(Ctx, observedBits);
+ }
+
+ class Cls extends React.Component {
+ render() {
+ return readContext(Context);
+ }
+ }
+ function Fn() {
+ return readContext(Context);
+ }
+ const Memo = React.memo(() => {
+ return readContext(Context);
+ });
+ const FwdRef = React.forwardRef((props, ref) => {
+ return readContext(Context);
+ });
+
+ const e = await render(
+ <PurpleContextProvider>
+ <RedContextProvider>
+ <span>
+ <Fn />
+ <Cls />
+ <Memo />
+ <FwdRef />
+ <Consumer>{() => readContext(Context)}</Consumer>
+ </span>
+ </RedContextProvider>
+ </PurpleContextProvider>,
+ );
+ expect(e.textContent).toBe('redredredredred');
+ });
+
 itRenders('multiple contexts', async render => {
 const Theme = React.createContext('dark');
 const Language = React.createContext('french');

-Original file line number
+Diff line change
 });
 describe('context',function(){
 -letPurpleContext,RedContext,Consumer;
 +letContext,PurpleContextProvider,RedContextProvider,Consumer;
 beforeEach(()=>{
 -letContext=React.createContext('none');
 +Context=React.createContext('none');
 classParentextendsReact.Component{
 render(){
+}
+}
 Consumer=Context.Consumer;
 -PurpleContext=props=><Parenttext="purple">{props.children}</Parent>;
 -RedContext=props=><Parenttext="red">{props.children}</Parent>;
 +PurpleContextProvider=props=>(
 +<Parenttext="purple">{props.children}</Parent>
 +);
 +RedContextProvider=props=>(
 +<Parenttext="red">{props.children}</Parent>
 +);
 });
 itRenders('class child with context',asyncrender=>{
+}
 conste=awaitrender(
 -<PurpleContext>
 +<PurpleContextProvider>
 <ClassChildWithContext/>
 -</PurpleContext>,
 +</PurpleContextProvider>,
 );
 expect(e.textContent).toBe('purple');
 });
+}
 conste=awaitrender(
 -<PurpleContext>
 +<PurpleContextProvider>
 <FunctionChildWithContext/>
 -</PurpleContext>,
 +</PurpleContextProvider>,
 );
 expect(e.textContent).toBe('purple');
 });
 constChild=props=><Grandchild/>;
 conste=awaitrender(
 -<PurpleContext>
 +<PurpleContextProvider>
 <Child/>
 -</PurpleContext>,
 +</PurpleContextProvider>,
 );
 expect(e.textContent).toBe('purple');
 });
 };
 conste=awaitrender(
 -<PurpleContext>
 -<RedContext>
 +<PurpleContextProvider>
 +<RedContextProvider>
 <Grandchild/>
 -</RedContext>
 -</PurpleContext>,
 +</RedContextProvider>
 +</PurpleContextProvider>,
 );
 expect(e.textContent).toBe('red');
 });
 +itRenders('readContext() in different components',asyncrender=>{
 +functionreadContext(Ctx,observedBits){
 +constdispatcher=
 +React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
 +.ReactCurrentDispatcher.current;
 +returndispatcher.readContext(Ctx,observedBits);
 +}
++
 +classClsextendsReact.Component{
 +render(){
 +returnreadContext(Context);
 +}
 +}
 +functionFn(){
 +returnreadContext(Context);
 +}
 +constMemo=React.memo(()=>{
 +returnreadContext(Context);
 +});
 +constFwdRef=React.forwardRef((props,ref)=>{
 +returnreadContext(Context);
 +});
++
 +conste=awaitrender(
 +<PurpleContextProvider>
 +<RedContextProvider>
 +<span>
 +<Fn/>
 +<Cls/>
 +<Memo/>
 +<FwdRef/>
 +<Consumer>{()=>readContext(Context)}</Consumer>
 +</span>
 +</RedContextProvider>
 +</PurpleContextProvider>,
 +);
 +expect(e.textContent).toBe('redredredredred');
 +});
++
 itRenders('multiple contexts',asyncrender=>{
 constTheme=React.createContext('dark');
 constLanguage=React.createContext('french');