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

* Rename context variables I just spent half an hour debugging why readContext(PurpleContext) doesn't work. * Add test coverage for readContext() on the server
facebook · Jan 21, 2019 · fe2ecd2 · fe2ecd2
1 parent 8f45a7f
commit fe2ecd2
Showing 1 changed file with 57 additions and 14 deletions.
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');