don't output UI in wrapRootElement

Author: pieh

e2e-tests/production-runtime/src/pages/static-query.js

@@ -1,27 +1,36 @@
-import * as React from "react"
+import React, { useContext } from "react"
 
 import Layout from "../components/layout"
 import Seo from "../components/seo"
 import * as StaticQuery from "../components/static-query"
 import * as UseStaticQuery from "../components/static-query/use-static-query"
+import { WrapRootContext } from "../wrap-root-context"
 
-const StaticQueryPage = () => (
-  <Layout>
-    <h1>
-      <code>StaticQuery</code>
-    </h1>
-    <StaticQuery.ExportedVariable data-testid="exported" />
-    <StaticQuery.Variable data-testid="variable" />
-    <StaticQuery.Inline data-testid="inline" />
-    <h2>
-      <code>useStaticQuery</code>
-    </h2>
-    <UseStaticQuery.Inline data-testid="use-static-query-inline" />
-    <UseStaticQuery.Variable data-testid="use-static-query-variable" />
-    <UseStaticQuery.ExportedVariable data-testid="use-static-query-exported" />
-    <UseStaticQuery.Destructuring data-testid="use-static-query-destructuring" />
-  </Layout>
-)
+const StaticQueryPage = () => {
+  const { title } = useContext(WrapRootContext)
+
+  return (
+    <Layout>
+      <h1>
+        <code>StaticQuery</code>
+      </h1>
+      <StaticQuery.ExportedVariable data-testid="exported" />
+      <StaticQuery.Variable data-testid="variable" />
+      <StaticQuery.Inline data-testid="inline" />
+      <h2>
+        <code>useStaticQuery</code>
+      </h2>
+      <UseStaticQuery.Inline data-testid="use-static-query-inline" />
+      <UseStaticQuery.Variable data-testid="use-static-query-variable" />
+      <UseStaticQuery.ExportedVariable data-testid="use-static-query-exported" />
+      <UseStaticQuery.Destructuring data-testid="use-static-query-destructuring" />
+      <div>
+        StaticQuery in wrapRootElement test (should show site title):
+        <span data-testid="wrap-root-element-result">{title}</span>
+      </div>
+    </Layout>
+  )
+}
 
 export const Head = () => <Seo />
 

e2e-tests/production-runtime/src/wrap-root-element.js

@@ -2,6 +2,7 @@ import * as React from "react"
 import { StaticQuery, graphql, Script } from "gatsby"
 import { scripts } from "../gatsby-script-scripts"
 import { ContextForSlicesProvider } from "./context-for-slices"
+import { WrapRootContext } from "./wrap-root-context"
 
 export default ({ element }) => {
   return (
@@ -21,13 +22,11 @@ export default ({ element }) => {
         },
       }) => (
         <ContextForSlicesProvider>
-          {element}
-          <Script src={scripts.jQuery} strategy="post-hydrate" />
-          <Script src={scripts.popper} strategy="idle" />
-          <div>
-            StaticQuery in wrapRootElement test (should show site title):
-            <span data-testid="wrap-root-element-result">{title}</span>
-          </div>
+          <WrapRootContext.Provider value={{ title }}>
+            {element}
+            <Script src={scripts.jQuery} strategy="post-hydrate" />
+            <Script src={scripts.popper} strategy="idle" />
+          </WrapRootContext.Provider>
         </ContextForSlicesProvider>
       )}
     />