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');