react-router 6.3.0 → 6.4.0-pre.3

package/__tests__/useMatch-test.tsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+import * as TestRenderer from "react-test-renderer";
+import { MemoryRouter, PathMatch, Routes, Route, useMatch } from "react-router";
+
+function ShowMatch({ pattern }: { pattern: string }) {
+  return <pre>{JSON.stringify(useMatch(pattern), null, 2)}</pre>;
+}
+
+describe("useMatch", () => {
+  describe("when the path matches the current URL", () => {
+    it("returns the match", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="/" element={<ShowMatch pattern="home" />}>
+                <Route path="/home" element={<h1>Home</h1>} />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <pre>
+          {
+          "params": {},
+          "pathname": "/home",
+          "pathnameBase": "/home",
+          "pattern": {
+            "path": "home",
+            "caseSensitive": false,
+            "end": true
+          }
+        }
+        </pre>
+      `);
+    });
+  });
+
+  describe("when the current URL ends with a slash", () => {
+    it("returns the match.pathname with the trailing slash", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home/"]}>
+            <Routes>
+              <Route path="/" element={<ShowMatch pattern="home" />}>
+                <Route path="/home" element={<h1>Home</h1>} />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <pre>
+          {
+          "params": {},
+          "pathname": "/home/",
+          "pathnameBase": "/home",
+          "pattern": {
+            "path": "home",
+            "caseSensitive": false,
+            "end": true
+          }
+        }
+        </pre>
+      `);
+    });
+  });
+
+  describe("when the path does not match the current URL", () => {
+    it("returns null", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="/" element={<ShowMatch pattern="about" />}>
+                <Route path="/home" element={<h1>Home</h1>} />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <pre>
+          null
+        </pre>
+      `);
+    });
+  });
+
+  describe("when re-rendered with the same URL", () => {
+    it("returns the memoized match", () => {
+      let path = "/home";
+      let match: PathMatch<string>;
+      let firstMatch: PathMatch<string>;
+
+      function HomePage() {
+        match = useMatch(path);
+
+        if (!firstMatch) {
+          firstMatch = match;
+        }
+
+        return null;
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={[path]}>
+            <Routes>
+              <Route path={path} element={<HomePage />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      TestRenderer.act(() => {
+        renderer.update(
+          <MemoryRouter initialEntries={[path]}>
+            <Routes>
+              <Route path={path} element={<HomePage />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(match).toBe(firstMatch);
+    });
+  });
+});

package/__tests__/useNavigate-test.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import * as TestRenderer from "react-test-renderer";
+import {
+  MemoryRouter,
+  Routes,
+  Route,
+  useNavigate,
+  useLocation,
+} from "react-router";
+
+describe("useNavigate", () => {
+  it("navigates to the new location", () => {
+    function Home() {
+      let navigate = useNavigate();
+
+      function handleClick() {
+        navigate("/about");
+      }
+
+      return (
+        <div>
+          <h1>Home</h1>
+          <button onClick={handleClick}>click me</button>
+        </div>
+      );
+    }
+
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <MemoryRouter initialEntries={["/home"]}>
+          <Routes>
+            <Route path="home" element={<Home />} />
+            <Route path="about" element={<h1>About</h1>} />
+          </Routes>
+        </MemoryRouter>
+      );
+    });
+
+    let button = renderer.root.findByType("button");
+
+    TestRenderer.act(() => {
+      button.props.onClick();
+    });
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <h1>
+        About
+      </h1>
+    `);
+  });
+
+  describe("with state", () => {
+    it("adds the state to location.state", () => {
+      function Home() {
+        let navigate = useNavigate();
+
+        function handleClick() {
+          navigate("/about", { state: { from: "home" } });
+        }
+
+        return (
+          <div>
+            <h1>Home</h1>
+            <button onClick={handleClick}>click me</button>
+          </div>
+        );
+      }
+
+      function ShowLocationState() {
+        return <p>location.state: {JSON.stringify(useLocation().state)}</p>;
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="home" element={<Home />} />
+              <Route path="about" element={<ShowLocationState />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      let button = renderer.root.findByType("button");
+
+      TestRenderer.act(() => {
+        button.props.onClick();
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <p>
+          location.state: 
+          {"from":"home"}
+        </p>
+      `);
+    });
+  });
+});

package/__tests__/useOutlet-test.tsx

@@ -0,0 +1,355 @@
+import * as React from "react";
+import * as TestRenderer from "react-test-renderer";
+import {
+  MemoryRouter,
+  Routes,
+  Route,
+  useOutlet,
+  useOutletContext,
+} from "react-router";
+
+describe("useOutlet", () => {
+  describe("when there is no child route", () => {
+    it("returns null", () => {
+      function Home() {
+        return useOutlet();
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="/home" element={<Home />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toBeNull();
+    });
+
+    it("renders the fallback", () => {
+      function Home() {
+        let outlet = useOutlet();
+        return <div>{outlet ? "outlet" : "no outlet"}</div>;
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="/home" element={<Home />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <div>
+          no outlet
+        </div>
+      `);
+    });
+
+    it("renders the fallback with context provided", () => {
+      function Home() {
+        let outlet = useOutlet({ some: "context" });
+        return <div>{outlet ? "outlet" : "no outlet"}</div>;
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="/home" element={<Home />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <div>
+          no outlet
+        </div>
+      `);
+    });
+  });
+
+  describe("when there is a child route", () => {
+    it("returns an element", () => {
+      function Users() {
+        return useOutlet();
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/users/profile"]}>
+            <Routes>
+              <Route path="users" element={<Users />}>
+                <Route path="profile" element={<h1>Profile</h1>} />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <h1>
+          Profile
+        </h1>
+      `);
+    });
+
+    it("returns an element when no context", () => {
+      function Home() {
+        let outlet = useOutlet();
+        return <div>{outlet ? "outlet" : "no outlet"}</div>;
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="/home" element={<Home />}>
+                <Route index element={<div>index</div>} />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <div>
+            outlet
+          </div>
+        `);
+    });
+
+    it("returns an element when context", () => {
+      function Home() {
+        let outlet = useOutlet({ some: "context" });
+        return <div>{outlet ? "outlet" : "no outlet"}</div>;
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="/home" element={<Home />}>
+                <Route index element={<div>index</div>} />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <div>
+            outlet
+          </div>
+        `);
+    });
+  });
+
+  describe("OutletContext when there is no context", () => {
+    it("returns null", () => {
+      function Users() {
+        return useOutlet();
+      }
+
+      function Profile() {
+        let outletContext = useOutletContext();
+
+        return (
+          <div>
+            <h1>Profile</h1>
+            <pre>{outletContext}</pre>
+          </div>
+        );
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/users/profile"]}>
+            <Routes>
+              <Route path="users" element={<Users />}>
+                <Route path="profile" element={<Profile />} />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <div>
+          <h1>
+            Profile
+          </h1>
+          <pre />
+        </div>
+      `);
+    });
+  });
+
+  describe("OutletContext when there is context", () => {
+    it("returns the context", () => {
+      function Users() {
+        return useOutlet([
+          "Mary",
+          "Jane",
+          "Michael",
+          "Bert",
+          "Winifred",
+          "George",
+        ]);
+      }
+
+      function Profile() {
+        let outletContext = useOutletContext<string[]>();
+
+        return (
+          <div>
+            <h1>Profile</h1>
+            <ul>
+              {outletContext.map((name) => (
+                <li key={name}>{name}</li>
+              ))}
+            </ul>
+          </div>
+        );
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/users/profile"]}>
+            <Routes>
+              <Route path="users" element={<Users />}>
+                <Route path="profile" element={<Profile />} />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <div>
+          <h1>
+            Profile
+          </h1>
+          <ul>
+            <li>
+              Mary
+            </li>
+            <li>
+              Jane
+            </li>
+            <li>
+              Michael
+            </li>
+            <li>
+              Bert
+            </li>
+            <li>
+              Winifred
+            </li>
+            <li>
+              George
+            </li>
+          </ul>
+        </div>
+      `);
+    });
+  });
+
+  describe("when child route without element prop", () => {
+    it("returns nested route element", () => {
+      function Layout() {
+        return useOutlet();
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/users/profile"]}>
+            <Routes>
+              <Route path="/" element={<Layout />}>
+                <Route path="users">
+                  <Route path="profile" element={<h1>Profile</h1>} />
+                </Route>
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <h1>
+          Profile
+        </h1>
+      `);
+    });
+
+    it("returns the context", () => {
+      function Layout() {
+        return useOutlet(["Mary", "Jane", "Michael"]);
+      }
+
+      function Profile() {
+        let outletContext = useOutletContext<string[]>();
+
+        return (
+          <div>
+            <h1>Profile</h1>
+            <ul>
+              {outletContext.map((name) => (
+                <li key={name}>{name}</li>
+              ))}
+            </ul>
+          </div>
+        );
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/users/profile"]}>
+            <Routes>
+              <Route path="/" element={<Layout />}>
+                <Route path="users">
+                  <Route path="profile" element={<Profile />} />
+                </Route>
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <div>
+          <h1>
+            Profile
+          </h1>
+          <ul>
+            <li>
+              Mary
+            </li>
+            <li>
+              Jane
+            </li>
+            <li>
+              Michael
+            </li>
+          </ul>
+        </div>
+      `);
+    });
+  });
+});