Ignore noscript content on the client (#13537)

* Ignore noscript content on the client (#11423)

* Fix failing test for ignoring noscript content

* Add a ServerIntegration test for noscript

Author: Ephem

packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js

@@ -36,6 +36,7 @@ const {
   itThrowsWhenRendering,
   serverRender,
   streamRender,
+  clientCleanRender,
   clientRenderOnServerString,
 } = ReactDOMServerIntegrationUtils(initModules);
 
@@ -576,6 +577,24 @@ describe('ReactDOMServerIntegration', () => {
       },
     );
 
+    itRenders('a noscript with children', async render => {
+      const e = await render(
+        <noscript>
+          <div>Enable JavaScript to run this app.</div>
+        </noscript>,
+      );
+      if (render === clientCleanRender) {
+        // On the client we ignore the contents of a noscript
+        expect(e.childNodes.length).toBe(0);
+      } else {
+        // On the server or when hydrating the content should be correct
+        expect(e.childNodes.length).toBe(1);
+        expect(e.firstChild.textContent).toBe(
+          '<div>Enable JavaScript to run this app.</div>',
+        );
+      }
+    });
+
     describe('newline-eating elements', function() {
       itRenders(
         'a newline-eating tag with content not starting with \\n',

packages/react-dom/src/__tests__/ReactServerRenderingHydration.js

@@ -341,4 +341,34 @@ describe('ReactDOMServerHydration', () => {
       expect(callback).toHaveBeenCalledTimes(0);
     }
   });
+
+  // Regression test for https://github.com/facebook/react/issues/11423
+  it('should ignore noscript content on the client and not warn about mismatches', () => {
+    const callback = jest.fn();
+    const TestComponent = ({onRender}) => {
+      onRender();
+      return <div>Enable JavaScript to run this app.</div>;
+    };
+    const markup = (
+      <noscript>
+        <TestComponent onRender={callback} />
+      </noscript>
+    );
+
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(markup);
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(element.textContent).toBe(
+      '<div>Enable JavaScript to run this app.</div>',
+    );
+
+    // On the client we want to keep the existing markup, but not render the
+    // actual elements for performance reasons and to avoid for example
+    // downloading images. This should also not warn for hydration mismatches.
+    ReactDOM.hydrate(markup, element);
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(element.textContent).toBe(
+      '<div>Enable JavaScript to run this app.</div>',
+    );
+  });
 });

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -247,6 +247,7 @@ export function shouldSetTextContent(type: string, props: Props): boolean {
   return (
     type === 'textarea' ||
     type === 'option' ||
+    type === 'noscript' ||
     typeof props.children === 'string' ||
     typeof props.children === 'number' ||
     (typeof props.dangerouslySetInnerHTML === 'object' &&