diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js index 5f941da8f9a9f..1060cb244baba 100644 --- 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 => {props.children}; - RedContext = props => {props.children}; + PurpleContextProvider = props => ( + {props.children} + ); + RedContextProvider = props => ( + {props.children} + ); }); itRenders('class child with context', async render => { @@ -67,9 +71,9 @@ describe('ReactDOMServerIntegration', () => { } const e = await render( - + - , + , ); expect(e.textContent).toBe('purple'); }); @@ -80,9 +84,9 @@ describe('ReactDOMServerIntegration', () => { } const e = await render( - + - , + , ); expect(e.textContent).toBe('purple'); }); @@ -127,9 +131,9 @@ describe('ReactDOMServerIntegration', () => { const Child = props => ; const e = await render( - + - , + , ); expect(e.textContent).toBe('purple'); }); @@ -144,15 +148,54 @@ describe('ReactDOMServerIntegration', () => { }; const e = await render( - - + + - - , + + , ); 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( + + + + + + + + {() => readContext(Context)} + + + , + ); + expect(e.textContent).toBe('redredredredred'); + }); + itRenders('multiple contexts', async render => { const Theme = React.createContext('dark'); const Language = React.createContext('french');