tighten up some unit tests that inadvertently pass partial hydration …

…data
remix-run · Nov 16, 2023 · 008cd9e · 008cd9e
1 parent a8783d3
commit 008cd9e
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 56 deletions.
diff --git a/packages/react-router-dom/__tests__/data-browser-router-test.tsx b/packages/react-router-dom/__tests__/data-browser-router-test.tsx
@@ -1660,14 +1660,12 @@ function testDomRouter(
       let router = createTestRouter(
         createRoutesFromElements(
           <Route element={<Layout />}>
-            <Route index loader={() => "index"} element={<h1>index</h1>} />
-            <Route path="1" loader={() => "1"} element={<h1>Page 1</h1>} />
-            <Route path="2" loader={() => "2"} element={<h1>Page 2</h1>} />
+            <Route index element={<h1>index</h1>} />
+            <Route path="1" element={<h1>Page 1</h1>} />
+            <Route path="2" element={<h1>Page 2</h1>} />
           </Route>
         ),
-        {
-          hydrationData: {},
-        }
+        {}
       );
       let { container } = render(<RouterProvider router={router} />);
 
@@ -1729,7 +1727,7 @@ function testDomRouter(
       let router = createTestRouter(
         createRoutesFromElements(
           <Route element={<Layout />}>
-            <Route index loader={() => "index"} element={<h1>Index Page</h1>} />
+            <Route index element={<h1>Index Page</h1>} />
             <Route
               path="form"
               action={() => "action data"}
@@ -1738,9 +1736,7 @@ function testDomRouter(
             <Route path="result" element={<h1>Result Page</h1>} />
           </Route>
         ),
-        {
-          hydrationData: {},
-        }
+        {}
       );
       let { container } = render(<RouterProvider router={router} />);
 
@@ -1794,7 +1790,7 @@ function testDomRouter(
       let router = createTestRouter(
         createRoutesFromElements(
           <Route element={<Layout />}>
-            <Route index loader={() => "index"} element={<h1>Index Page</h1>} />
+            <Route index element={<h1>Index Page</h1>} />
             <Route
               path="form"
               action={() =>
@@ -1859,13 +1855,12 @@ function testDomRouter(
       let router = createTestRouter(
         createRoutesFromElements(
           <Route element={<Layout />}>
-            <Route index loader={() => "index"} element={<h1>index</h1>} />
+            <Route index element={<h1>index</h1>} />
             <Route path="1" loader={() => "1"} element={<h1>Page 1</h1>} />
             <Route path="2" loader={() => "2"} element={<h1>Page 2</h1>} />
           </Route>
         ),
         {
-          hydrationData: {},
           window: getWindow("/"),
         }
       );
@@ -1933,18 +1928,12 @@ function testDomRouter(
       let router = createTestRouter(
         createRoutesFromElements(
           <Route element={<Layout />}>
-            <Route index loader={() => "index"} element={<h1>index</h1>} />
-            <Route path="1" loader={() => "1"} element={<h1>Page 1</h1>} />
-            <Route
-              path="2"
-              action={() => "action"}
-              loader={() => "2"}
-              element={<h1>Page 2</h1>}
-            />
+            <Route index element={<h1>index</h1>} />
+            <Route path="1" element={<h1>Page 1</h1>} />
+            <Route path="2" action={() => "action"} element={<h1>Page 2</h1>} />
           </Route>
         ),
         {
-          hydrationData: {},
           window: getWindow("/"),
         }
       );
@@ -2028,7 +2017,7 @@ function testDomRouter(
       let router = createTestRouter(
         createRoutesFromElements(
           <Route element={<Layout />}>
-            <Route index loader={() => "index"} element={<h1>index</h1>} />
+            <Route index element={<h1>index</h1>} />
             <Route
               path="1"
               action={() => "action"}
@@ -2038,7 +2027,6 @@ function testDomRouter(
           </Route>
         ),
         {
-          hydrationData: {},
           window: getWindow("/"),
         }
       );
@@ -2136,7 +2124,7 @@ function testDomRouter(
       let testWindow = getWindow("/base/path");
       let router = createTestRouter(
         createRoutesFromElements(<Route path="path" element={<Comp />} />),
-        { basename: "/base", hydrationData: {}, window: testWindow }
+        { basename: "/base", window: testWindow }
       );
       let { container } = render(<RouterProvider router={router} />);
 
@@ -2213,7 +2201,7 @@ function testDomRouter(
         ),
         {
           basename: "/base",
-          hydrationData: {},
+
           window: testWindow,
         }
       );
@@ -2296,16 +2284,17 @@ function testDomRouter(
       let router = createTestRouter(
         createRoutesFromElements(
           <Route
+            id="index"
             path="/"
-            action={async ({ request }) => {
+            action={async () => {
               throw new Error("Should not hit this");
             }}
             loader={() => loaderDefer.promise}
             element={<Home />}
           />
         ),
         {
-          hydrationData: {},
+          hydrationData: { loaderData: { index: "Initial Data" } },
           window: getWindow("/"),
         }
       );
@@ -2339,7 +2328,9 @@ function testDomRouter(
           <p>
             idle
           </p>
-          <p />
+          <p>
+            Initial Data
+          </p>
         </div>"
       `);
 
@@ -2353,7 +2344,9 @@ function testDomRouter(
           <p>
             loading
           </p>
-          <p />
+          <p>
+            Initial Data
+          </p>
         </div>"
       `);
 
@@ -2444,6 +2437,7 @@ function testDomRouter(
       let router = createTestRouter(
         createRoutesFromElements(
           <Route
+            id="index"
             path="/"
             action={async ({ request }) => {
               let resolvedValue = await actionDefer.promise;
@@ -2455,7 +2449,7 @@ function testDomRouter(
           />
         ),
         {
-          hydrationData: {},
+          hydrationData: { loaderData: { index: "Initial Data" } },
           window: getWindow("/"),
         }
       );
@@ -3899,12 +3893,14 @@ function testDomRouter(
         let router = createTestRouter(
           createRoutesFromElements(
             <Route
+              id="parent"
               path="/parent"
               element={<Outlet />}
               action={() => "PARENT ACTION"}
               loader={() => "PARENT LOADER"}
             >
               <Route
+                id="index"
                 index
                 element={<Index />}
                 action={() => "INDEX ACTION"}
@@ -4832,6 +4828,7 @@ function testDomRouter(
           createRoutesFromElements(
             <>
               <Route
+                id="index"
                 path="/"
                 element={<Comp />}
                 action={async ({ request }) => {
@@ -4850,7 +4847,7 @@ function testDomRouter(
           ),
           {
             window: getWindow("/"),
-            hydrationData: { loaderData: { "0": null } },
+            hydrationData: { loaderData: { index: null } },
           }
         );
         let { container } = render(<RouterProvider router={router} />);