Update useMatch tests to assert based on renderer output

Author: mjackson

packages/react-router/__tests__/useMatch-test.tsx

@@ -1,86 +1,96 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import type { PathMatch } from "react-router";
 import { MemoryRouter, 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 match: PathMatch | null = null;
-      function Layout() {
-        match = useMatch("home");
-        return null;
-      }
-
+      let renderer: TestRenderer.ReactTestRenderer;
       TestRenderer.act(() => {
-        TestRenderer.create(
+        renderer = TestRenderer.create(
           <MemoryRouter initialEntries={["/home"]}>
             <Routes>
-              <Route path="/" element={<Layout />}>
+              <Route path="/" element={<ShowMatch pattern="home" />}>
                 <Route path="/home" element={<h1>Home</h1>} />
               </Route>
             </Routes>
           </MemoryRouter>
         );
       });
 
-      expect(match).toMatchObject({
-        params: {},
-        pathname: "/home",
-        pattern: { path: "home" }
-      });
+      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 match = null;
-      function Layout() {
-        match = useMatch("home");
-        return null;
-      }
-
+      let renderer: TestRenderer.ReactTestRenderer;
       TestRenderer.act(() => {
-        TestRenderer.create(
+        renderer = TestRenderer.create(
           <MemoryRouter initialEntries={["/home/"]}>
             <Routes>
-              <Route path="/" element={<Layout />}>
+              <Route path="/" element={<ShowMatch pattern="home" />}>
                 <Route path="/home" element={<h1>Home</h1>} />
               </Route>
             </Routes>
           </MemoryRouter>
         );
       });
 
-      expect(match).toMatchObject({
-        params: {},
-        pathname: "/home/",
-        pattern: { path: "home" }
-      });
+      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 match = null;
-      function Layout() {
-        match = useMatch("about");
-        return null;
-      }
-
+      let renderer: TestRenderer.ReactTestRenderer;
       TestRenderer.act(() => {
-        TestRenderer.create(
+        renderer = TestRenderer.create(
           <MemoryRouter initialEntries={["/home"]}>
             <Routes>
-              <Route path="/" element={<Layout />}>
+              <Route path="/" element={<ShowMatch pattern="about" />}>
                 <Route path="/home" element={<h1>Home</h1>} />
               </Route>
             </Routes>
           </MemoryRouter>
         );
       });
 
-      expect(match).toBeNull();
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <pre>
+          null
+        </pre>
+      `);
     });
   });
 });