From 71683a0a9eb853f3cbd54b48a221c5db01925165 Mon Sep 17 00:00:00 2001
From: Michael Jackson <michael@jackson.us>
Date: Fri, 22 Oct 2021 23:50:39 -0700
Subject: [PATCH] Clean up some tests

---
 .../__tests__/useHref-basename-test.tsx       | 188 ++++++------------
 .../react-router/__tests__/useHref-test.tsx   |  48 ++---
 2 files changed, 75 insertions(+), 161 deletions(-)

diff --git a/packages/react-router/__tests__/useHref-basename-test.tsx b/packages/react-router/__tests__/useHref-basename-test.tsx
index 69aa48fd43..f24405c99e 100644
--- a/packages/react-router/__tests__/useHref-basename-test.tsx
+++ b/packages/react-router/__tests__/useHref-basename-test.tsx
@@ -1,24 +1,22 @@
 import * as React from "react";
 import { create as createTestRenderer } from "react-test-renderer";
 import { MemoryRouter, Routes, Route, useHref } from "react-router";
+import { render } from "react-dom";
+
+function ShowHref({ to }: { to: string }) {
+  return <p>{useHref(to)}</p>;
+}
 
 describe("useHref under a basename", () => {
   describe("to an absolute route", () => {
     it("returns the correct href", () => {
-      function Admin() {
-        let href = useHref("/invoices");
-        return <p>{href}</p>;
-      }
-
-      let element = (
+      let renderer = createTestRenderer(
         <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
           <Routes>
-            <Route path="admin" element={<Admin />} />
+            <Route path="admin" element={<ShowHref to="/invoices" />} />
           </Routes>
         </MemoryRouter>
       );
-      let renderer = createTestRenderer(element);
-      renderer.update(element);
 
       expect(renderer.toJSON()).toMatchInlineSnapshot(`
         <p>
@@ -30,19 +28,13 @@ describe("useHref under a basename", () => {
 
   describe("to a child route", () => {
     it("returns the correct href", () => {
-      function Admin() {
-        let href = useHref("invoices");
-        return <p>{href}</p>;
-      }
-      let element = (
+      let renderer = createTestRenderer(
         <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
           <Routes>
-            <Route path="admin" element={<Admin />} />
+            <Route path="admin" element={<ShowHref to="invoices" />} />
           </Routes>
         </MemoryRouter>
       );
-      let renderer = createTestRenderer(element);
-      renderer.update(element);
 
       expect(renderer.toJSON()).toMatchInlineSnapshot(`
         <p>
@@ -53,20 +45,13 @@ describe("useHref under a basename", () => {
 
     describe("when the URL has a trailing slash", () => {
       it("returns the correct href", () => {
-        function Admin() {
-          let href = useHref("invoices");
-          return <p>{href}</p>;
-        }
-
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter basename="/app" initialEntries={["/app/admin/"]}>
             <Routes>
-              <Route path="admin" element={<Admin />} />
+              <Route path="admin" element={<ShowHref to="invoices" />} />
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         expect(renderer.toJSON()).toMatchInlineSnapshot(`
           <p>
@@ -78,20 +63,13 @@ describe("useHref under a basename", () => {
 
     describe("when the href has a trailing slash", () => {
       it("returns the correct href", () => {
-        function Admin() {
-          let href = useHref("invoices/");
-          return <p>{href}</p>;
-        }
-
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
             <Routes>
-              <Route path="admin" element={<Admin />} />
+              <Route path="admin" element={<ShowHref to="invoices/" />} />
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         expect(renderer.toJSON()).toMatchInlineSnapshot(`
           <p>
@@ -104,20 +82,13 @@ describe("useHref under a basename", () => {
 
   describe("to a sibling route", () => {
     it("returns the correct href", () => {
-      function Admin() {
-        let href = useHref("../dashboard");
-        return <p>{href}</p>;
-      }
-
-      let element = (
+      let renderer = createTestRenderer(
         <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
           <Routes>
-            <Route path="admin" element={<Admin />} />
+            <Route path="admin" element={<ShowHref to="../dashboard" />} />
           </Routes>
         </MemoryRouter>
       );
-      let renderer = createTestRenderer(element);
-      renderer.update(element);
 
       expect(renderer.toJSON()).toMatchInlineSnapshot(`
         <p>
@@ -128,20 +99,13 @@ describe("useHref under a basename", () => {
 
     describe("when the URL has a trailing slash", () => {
       it("returns the correct href", () => {
-        function Admin() {
-          let href = useHref("../dashboard");
-          return <p>{href}</p>;
-        }
-
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter basename="/app" initialEntries={["/app/admin/"]}>
             <Routes>
-              <Route path="admin" element={<Admin />} />
+              <Route path="admin" element={<ShowHref to="../dashboard" />} />
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         expect(renderer.toJSON()).toMatchInlineSnapshot(`
           <p>
@@ -153,20 +117,13 @@ describe("useHref under a basename", () => {
 
     describe("when the href has a trailing slash", () => {
       it("returns the correct href", () => {
-        function Admin() {
-          let href = useHref("../dashboard/");
-          return <p>{href}</p>;
-        }
-
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
             <Routes>
-              <Route path="admin" element={<Admin />} />
+              <Route path="admin" element={<ShowHref to="../dashboard/" />} />
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         expect(renderer.toJSON()).toMatchInlineSnapshot(`
           <p>
@@ -179,20 +136,13 @@ describe("useHref under a basename", () => {
 
   describe("to a parent route", () => {
     it("returns the correct href", () => {
-      function Admin() {
-        let href = useHref("..");
-        return <p>{href}</p>;
-      }
-
-      let element = (
+      let renderer = createTestRenderer(
         <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
           <Routes>
-            <Route path="admin" element={<Admin />} />
+            <Route path="admin" element={<ShowHref to=".." />} />
           </Routes>
         </MemoryRouter>
       );
-      let renderer = createTestRenderer(element);
-      renderer.update(element);
 
       expect(renderer.toJSON()).toMatchInlineSnapshot(`
         <p>
@@ -203,20 +153,13 @@ describe("useHref under a basename", () => {
 
     describe("when the URL has a trailing slash", () => {
       it("returns the correct href", () => {
-        function Admin() {
-          let href = useHref("..");
-          return <p>{href}</p>;
-        }
-
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter basename="/app" initialEntries={["/app/admin/"]}>
             <Routes>
-              <Route path="admin" element={<Admin />} />
+              <Route path="admin" element={<ShowHref to=".." />} />
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         expect(renderer.toJSON()).toMatchInlineSnapshot(`
           <p>
@@ -228,20 +171,13 @@ describe("useHref under a basename", () => {
 
     describe("when the href has a trailing slash", () => {
       it("returns the correct href", () => {
-        function Admin() {
-          let href = useHref("../");
-          return <p>{href}</p>;
-        }
-
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
             <Routes>
-              <Route path="admin" element={<Admin />} />
+              <Route path="admin" element={<ShowHref to="../" />} />
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         expect(renderer.toJSON()).toMatchInlineSnapshot(`
           <p>
@@ -254,20 +190,16 @@ describe("useHref under a basename", () => {
 
   describe("with a to value that has more .. segments than the current URL", () => {
     it("returns the correct href", () => {
-      function Admin() {
-        let href = useHref("../../../dashboard");
-        return <p>{href}</p>;
-      }
-
-      let element = (
+      let renderer = createTestRenderer(
         <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
           <Routes>
-            <Route path="admin" element={<Admin />} />
+            <Route
+              path="admin"
+              element={<ShowHref to="../../../dashboard" />}
+            />
           </Routes>
         </MemoryRouter>
       );
-      let renderer = createTestRenderer(element);
-      renderer.update(element);
 
       // This is correct because the basename works like a chroot "jail".
       // Relative <Link to> values cannot "escape" into a higher level URL since
@@ -282,20 +214,13 @@ describe("useHref under a basename", () => {
 
     describe("and no additional segments", () => {
       it("returns the correct href", () => {
-        function Admin() {
-          let href = useHref("../../..");
-          return <p>{href}</p>;
-        }
-
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
             <Routes>
-              <Route path="admin" element={<Admin />} />
+              <Route path="admin" element={<ShowHref to="../../.." />} />
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         // This is correct because the basename works like a chroot "jail".
         // Relative <Link to> values cannot "escape" into a higher level URL
@@ -311,20 +236,16 @@ describe("useHref under a basename", () => {
 
     describe("when the URL has a trailing slash", () => {
       it("returns the correct href", () => {
-        function Admin() {
-          let href = useHref("../../../dashboard");
-          return <p>{href}</p>;
-        }
-
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter basename="/app" initialEntries={["/app/admin/"]}>
             <Routes>
-              <Route path="admin" element={<Admin />} />
+              <Route
+                path="admin"
+                element={<ShowHref to="../../../dashboard" />}
+              />
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         // This is correct because the basename works like a chroot "jail".
         // Relative <Link to> values cannot "escape" into a higher level URL
@@ -340,20 +261,16 @@ describe("useHref under a basename", () => {
 
     describe("when the href has a trailing slash", () => {
       it("returns the correct href", () => {
-        function Admin() {
-          let href = useHref("../../../dashboard/");
-          return <p>{href}</p>;
-        }
-
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
             <Routes>
-              <Route path="admin" element={<Admin />} />
+              <Route
+                path="admin"
+                element={<ShowHref to="../../../dashboard/" />}
+              />
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         expect(renderer.toJSON()).toMatchInlineSnapshot(`
           <p>
@@ -363,4 +280,25 @@ describe("useHref under a basename", () => {
       });
     });
   });
+
+  describe("after an update", () => {
+    it("does not change", () => {
+      let element = (
+        <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
+          <Routes>
+            <Route path="admin" element={<ShowHref to="/invoices" />} />
+          </Routes>
+        </MemoryRouter>
+      );
+
+      let renderer = createTestRenderer(element);
+      renderer.update(element);
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <p>
+          /app/invoices
+        </p>
+      `);
+    });
+  });
 });
diff --git a/packages/react-router/__tests__/useHref-test.tsx b/packages/react-router/__tests__/useHref-test.tsx
index 0eb41be172..57f59a1971 100644
--- a/packages/react-router/__tests__/useHref-test.tsx
+++ b/packages/react-router/__tests__/useHref-test.tsx
@@ -9,15 +9,13 @@ function ShowHref({ to }: { to: string }) {
 describe("useHref", () => {
   describe("to a child route", () => {
     it("returns the correct href", () => {
-      let element = (
+      let renderer = createTestRenderer(
         <MemoryRouter initialEntries={["/courses"]}>
           <Routes>
             <Route path="courses" element={<ShowHref to="advanced-react" />} />
           </Routes>
         </MemoryRouter>
       );
-      let renderer = createTestRenderer(element);
-      renderer.update(element);
 
       expect(renderer.toJSON()).toMatchInlineSnapshot(`
         <p>
@@ -28,7 +26,7 @@ describe("useHref", () => {
 
     describe("when the URL has a trailing slash", () => {
       it("returns the correct href", () => {
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter initialEntries={["/courses/"]}>
             <Routes>
               <Route
@@ -38,8 +36,6 @@ describe("useHref", () => {
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         expect(renderer.toJSON()).toMatchInlineSnapshot(`
           <p>
@@ -51,7 +47,7 @@ describe("useHref", () => {
 
     describe("when the href has a trailing slash", () => {
       it("returns the correct href", () => {
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter initialEntries={["/courses"]}>
             <Routes>
               <Route
@@ -61,8 +57,6 @@ describe("useHref", () => {
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         expect(renderer.toJSON()).toMatchInlineSnapshot(`
           <p>
@@ -75,15 +69,13 @@ describe("useHref", () => {
 
   describe("to a sibling route", () => {
     it("returns the correct href", () => {
-      let element = (
+      let renderer = createTestRenderer(
         <MemoryRouter initialEntries={["/courses"]}>
           <Routes>
             <Route path="courses" element={<ShowHref to="../about" />} />
           </Routes>
         </MemoryRouter>
       );
-      let renderer = createTestRenderer(element);
-      renderer.update(element);
 
       expect(renderer.toJSON()).toMatchInlineSnapshot(`
         <p>
@@ -94,15 +86,13 @@ describe("useHref", () => {
 
     describe("when the URL has a trailing slash", () => {
       it("returns the correct href", () => {
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter initialEntries={["/courses/"]}>
             <Routes>
               <Route path="/courses/" element={<ShowHref to="../about" />} />
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         expect(renderer.toJSON()).toMatchInlineSnapshot(`
           <p>
@@ -114,15 +104,13 @@ describe("useHref", () => {
 
     describe("when the href has a trailing slash", () => {
       it("returns the correct href", () => {
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter initialEntries={["/courses"]}>
             <Routes>
               <Route path="courses" element={<ShowHref to="../about/" />} />
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         expect(renderer.toJSON()).toMatchInlineSnapshot(`
           <p>
@@ -135,7 +123,7 @@ describe("useHref", () => {
 
   describe("to a parent route", () => {
     it("returns the correct href", () => {
-      let element = (
+      let renderer = createTestRenderer(
         <MemoryRouter initialEntries={["/courses/advanced-react"]}>
           <Routes>
             <Route path="courses">
@@ -144,8 +132,6 @@ describe("useHref", () => {
           </Routes>
         </MemoryRouter>
       );
-      let renderer = createTestRenderer(element);
-      renderer.update(element);
 
       expect(renderer.toJSON()).toMatchInlineSnapshot(`
         <p>
@@ -156,7 +142,7 @@ describe("useHref", () => {
 
     describe("when the URL has a trailing slash", () => {
       it("returns the correct href", () => {
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter initialEntries={["/courses/advanced-react/"]}>
             <Routes>
               <Route path="courses">
@@ -165,8 +151,6 @@ describe("useHref", () => {
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         expect(renderer.toJSON()).toMatchInlineSnapshot(`
           <p>
@@ -178,7 +162,7 @@ describe("useHref", () => {
 
     describe("when the href has a trailing slash", () => {
       it("returns the correct href", () => {
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter initialEntries={["/courses/advanced-react"]}>
             <Routes>
               <Route path="courses">
@@ -187,8 +171,6 @@ describe("useHref", () => {
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         expect(renderer.toJSON()).toMatchInlineSnapshot(`
           <p>
@@ -201,7 +183,7 @@ describe("useHref", () => {
 
   describe("to an absolute route", () => {
     it("returns the correct href", () => {
-      let element = (
+      let renderer = createTestRenderer(
         <MemoryRouter initialEntries={["/courses/advanced-react"]}>
           <Routes>
             <Route
@@ -211,8 +193,6 @@ describe("useHref", () => {
           </Routes>
         </MemoryRouter>
       );
-      let renderer = createTestRenderer(element);
-      renderer.update(element);
 
       expect(renderer.toJSON()).toMatchInlineSnapshot(`
         <p>
@@ -224,7 +204,7 @@ describe("useHref", () => {
 
   describe("with a to value that has more .. segments than are in the URL", () => {
     it("returns the correct href", () => {
-      let element = (
+      let renderer = createTestRenderer(
         <MemoryRouter initialEntries={["/courses/react-fundamentals"]}>
           <Routes>
             <Route path="courses">
@@ -236,8 +216,6 @@ describe("useHref", () => {
           </Routes>
         </MemoryRouter>
       );
-      let renderer = createTestRenderer(element);
-      renderer.update(element);
 
       expect(renderer.toJSON()).toMatchInlineSnapshot(`
         <p>
@@ -248,15 +226,13 @@ describe("useHref", () => {
 
     describe("and no additional segments", () => {
       it("links to the root /", () => {
-        let element = (
+        let renderer = createTestRenderer(
           <MemoryRouter initialEntries={["/home"]}>
             <Routes>
               <Route path="/home" element={<ShowHref to="../../.." />} />
             </Routes>
           </MemoryRouter>
         );
-        let renderer = createTestRenderer(element);
-        renderer.update(element);
 
         expect(renderer.toJSON()).toMatchInlineSnapshot(`
           <p>