Fix root default HydrateFallback when Layout exists (#8892)

remix-run · Feb 26, 2024 · 0fe6ae6 · 0fe6ae6
1 parent 189b6b8
commit 0fe6ae6
Showing 1 changed file with 69 additions and 0 deletions.
diff --git a/integration/spa-mode-test.ts b/integration/spa-mode-test.ts
@@ -515,6 +515,75 @@ test.describe("SPA Mode", () => {
       // Hydrates without issues
       expect(logs).toEqual([]);
     });
+
+    test("wraps default root HydrateFallback in user-provided Layout", async ({
+      page,
+    }) => {
+      fixture = await createFixture({
+        compiler: "vite",
+        spaMode: true,
+        files: {
+          "vite.config.ts": js`
+            import { defineConfig } from "vite";
+            import { vitePlugin as remix } from "@remix-run/dev";
+
+            export default defineConfig({
+              plugins: [remix({
+                // We don't want to pick up the app/routes/_index.tsx file from
+                // the template and instead want to use only the src/root.tsx
+                // file below
+                appDirectory: "src",
+                ssr: false,
+              })],
+            });
+          `,
+          "src/root.tsx": js`
+            import {
+              Meta,
+              Links,
+              Outlet,
+              Routes,
+              Route,
+              Scripts,
+              ScrollRestoration,
+            } from "@remix-run/react";
+
+            export function Layout({ children }: { children: React.ReactNode }) {
+              return (
+                <html>
+                  <head>
+                    <Meta />
+                    <Links />
+                  </head>
+                  <body>
+                    {children}
+                    <ScrollRestoration />
+                    <Scripts />
+                  </body>
+                </html>
+              );
+            }
+
+            export default function Root() {
+              return (
+                <>
+                  <h1 data-root>Root</h1>
+                  <Routes>
+                    <Route path="/" element={<h2 data-index>Index</h2>} />
+                  </Routes>
+                </>
+              );
+            }
+          `,
+        },
+      });
+      appFixture = await createAppFixture(fixture);
+
+      let res = await fixture.requestDocument("/");
+      let html = await res.text();
+      expect(html.match(/<html/g)?.length).toBe(1);
+      expect(html.match(/<\/html/g)?.length).toBe(1);
+    });
   });
 
   test.describe("normal apps", () => {