Refactor tests to TS

packages/react-router-dom/__tests__/link-click-test.js → packages/react-router-dom/__tests__/link-click-test.tsx

@@ -4,7 +4,7 @@ import { act } from "react-dom/test-utils";
 import { MemoryRouter as Router, Routes, Route, Link } from "react-router-dom";
 
 describe("A <Link> click", () => {
-  let node;
+  let node: HTMLDivElement;
   beforeEach(() => {
     node = document.createElement("div");
     document.body.appendChild(node);
@@ -62,7 +62,7 @@ describe("A <Link> click", () => {
   describe("when preventDefault is used on the click handler", () => {
     it("stays on the same page", () => {
       function Home() {
-        function handleClick(event) {
+        function handleClick(event: React.MouseEvent<HTMLAnchorElement>) {
           event.preventDefault();
         }
 

packages/react-router-dom/__tests__/link-href-test.js → packages/react-router-dom/__tests__/link-href-test.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { act, create as createTestRenderer } from "react-test-renderer";
 import { MemoryRouter as Router, Routes, Route, Link } from "react-router-dom";
+import type { ReactTestRenderer } from "react-test-renderer";
 
 describe("Link href", () => {
   describe("absolute", () => {
@@ -14,7 +15,7 @@ describe("Link href", () => {
         );
       }
 
-      let renderer;
+      let renderer: ReactTestRenderer;
       act(() => {
         renderer = createTestRenderer(
           <Router initialEntries={["/home"]}>
@@ -43,7 +44,7 @@ describe("Link href", () => {
         );
       }
 
-      let renderer;
+      let renderer: ReactTestRenderer;
       act(() => {
         renderer = createTestRenderer(
           <Router initialEntries={["/home"]}>
@@ -72,7 +73,7 @@ describe("Link href", () => {
         );
       }
 
-      let renderer;
+      let renderer: ReactTestRenderer;
       act(() => {
         renderer = createTestRenderer(
           <Router initialEntries={["/home"]}>
@@ -101,7 +102,7 @@ describe("Link href", () => {
         );
       }
 
-      let renderer;
+      let renderer: ReactTestRenderer;
       act(() => {
         renderer = createTestRenderer(
           <Router initialEntries={["/home"]}>

packages/react-router-dom/__tests__/link-push-test.js → packages/react-router-dom/__tests__/link-push-test.tsx

@@ -2,13 +2,14 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { act } from "react-dom/test-utils";
 import { Router, Routes, Route, Link } from "react-router-dom";
+import type { History } from "history";
 
-function createHref({ pathname = "/", search = "", hash = "" }) {
+function createHref({ pathname = "/", search = "", hash = "" }): string {
   return pathname + search + hash;
 }
 
 function createMockHistory({ pathname = "/", search = "", hash = "" }) {
-  let location = { pathname, search, hash };
+  let location: Partial<History["location"]> = { pathname, search, hash };
   return {
     action: "POP",
     location,
@@ -18,13 +19,17 @@ function createMockHistory({ pathname = "/", search = "", hash = "" }) {
     go() {},
     back() {},
     forward() {},
-    listen() {},
-    block() {}
-  };
+    listen() {
+      return () => {};
+    },
+    block() {
+      return () => {};
+    }
+  } as History;
 }
 
 describe("Link push and replace", () => {
-  let node;
+  let node: HTMLDivElement;
   beforeEach(() => {
     node = document.createElement("div");
     document.body.appendChild(node);

packages/react-router-dom/__tests__/nav-link-active-test.js → packages/react-router-dom/__tests__/nav-link-active-test.tsx

@@ -6,6 +6,7 @@ import {
   Route,
   NavLink
 } from "react-router-dom";
+import type { ReactTestRenderer } from "react-test-renderer";
 
 describe("NavLink", () => {
   describe("when it does not match", () => {
@@ -20,7 +21,7 @@ describe("NavLink", () => {
         );
       }
 
-      let renderer;
+      let renderer: ReactTestRenderer;
       act(() => {
         renderer = createTestRenderer(
           <Router initialEntries={["/home"]}>
@@ -51,7 +52,7 @@ describe("NavLink", () => {
         );
       }
 
-      let renderer;
+      let renderer: ReactTestRenderer;
       act(() => {
         renderer = createTestRenderer(
           <Router initialEntries={["/home"]}>
@@ -83,7 +84,7 @@ describe("NavLink", () => {
         );
       }
 
-      let renderer;
+      let renderer: ReactTestRenderer;
       act(() => {
         renderer = createTestRenderer(
           <Router initialEntries={["/home"]}>
@@ -111,7 +112,7 @@ describe("NavLink", () => {
         );
       }
 
-      let renderer;
+      let renderer: ReactTestRenderer;
       act(() => {
         renderer = createTestRenderer(
           <Router initialEntries={["/home"]}>
@@ -146,7 +147,7 @@ describe("NavLink", () => {
           return <div>Child</div>;
         }
 
-        let renderer;
+        let renderer: ReactTestRenderer;
         act(() => {
           renderer = createTestRenderer(
             <Router initialEntries={["/home/child"]}>
@@ -180,7 +181,7 @@ describe("NavLink", () => {
           return <div>Child</div>;
         }
 
-        let renderer;
+        let renderer: ReactTestRenderer;
         act(() => {
           renderer = createTestRenderer(
             <Router initialEntries={["/home/child"]}>
@@ -218,7 +219,7 @@ describe("NavLink", () => {
           return <div>Child</div>;
         }
 
-        let renderer;
+        let renderer: ReactTestRenderer;
         act(() => {
           renderer = createTestRenderer(
             <Router initialEntries={["/home/child"]}>
@@ -256,7 +257,7 @@ describe("NavLink", () => {
           return <div>Child</div>;
         }
 
-        let renderer;
+        let renderer: ReactTestRenderer;
         act(() => {
           renderer = createTestRenderer(
             <Router initialEntries={["/home/child"]}>
@@ -292,7 +293,7 @@ describe("NavLink", () => {
           );
         }
 
-        let renderer;
+        let renderer: ReactTestRenderer;
         act(() => {
           renderer = createTestRenderer(
             <Router initialEntries={["/Home"]}>
@@ -320,7 +321,7 @@ describe("NavLink", () => {
           );
         }
 
-        let renderer;
+        let renderer: ReactTestRenderer;
         act(() => {
           renderer = createTestRenderer(
             <Router initialEntries={["/Home"]}>
@@ -352,7 +353,7 @@ describe("NavLink", () => {
           );
         }
 
-        let renderer;
+        let renderer: ReactTestRenderer;
         act(() => {
           renderer = createTestRenderer(
             <Router initialEntries={["/Home"]}>
@@ -384,7 +385,7 @@ describe("NavLink", () => {
           );
         }
 
-        let renderer;
+        let renderer: ReactTestRenderer;
         act(() => {
           renderer = createTestRenderer(
             <Router initialEntries={["/Home"]}>
@@ -419,7 +420,7 @@ describe("NavLink under a Routes with a basename", () => {
         );
       }
 
-      let renderer;
+      let renderer: ReactTestRenderer;
       act(() => {
         renderer = createTestRenderer(
           <Router initialEntries={["/app/home"]}>
@@ -450,7 +451,7 @@ describe("NavLink under a Routes with a basename", () => {
         );
       }
 
-      let renderer;
+      let renderer: ReactTestRenderer;
       act(() => {
         renderer = createTestRenderer(
           <Router initialEntries={["/app/home"]}>
@@ -482,7 +483,7 @@ describe("NavLink under a Routes with a basename", () => {
         );
       }
 
-      let renderer;
+      let renderer: ReactTestRenderer;
       act(() => {
         renderer = createTestRenderer(
           <Router initialEntries={["/app/home"]}>
@@ -510,7 +511,7 @@ describe("NavLink under a Routes with a basename", () => {
         );
       }
 
-      let renderer;
+      let renderer: ReactTestRenderer;
       act(() => {
         renderer = createTestRenderer(
           <Router initialEntries={["/app/home"]}>

packages/react-router-dom/__tests__/navigate-encode-params-test.js → packages/react-router-dom/__tests__/navigate-encode-params-test.tsx

@@ -10,7 +10,7 @@ import {
 } from "react-router-dom";
 
 describe("navigate with params", () => {
-  let node;
+  let node: HTMLDivElement;
   beforeEach(() => {
     node = document.createElement("div");
     document.body.appendChild(node);

packages/react-router-dom/__tests__/search-params-test.js → packages/react-router-dom/__tests__/search-params-test.tsx

@@ -10,11 +10,11 @@ import {
 
 describe("useSearchParams", () => {
   function SearchPage() {
-    let queryRef = React.useRef();
+    let queryRef = React.useRef<HTMLInputElement>();
     let [searchParams, setSearchParams] = useSearchParams({ q: "" });
     let query = searchParams.get("q");
 
-    function handleSubmit(event) {
+    function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
       event.preventDefault();
       setSearchParams({ q: queryRef.current.value });
     }
@@ -30,7 +30,7 @@ describe("useSearchParams", () => {
     );
   }
 
-  let node;
+  let node: HTMLDivElement;
   beforeEach(() => {
     node = document.createElement("div");
     document.body.appendChild(node);
@@ -56,7 +56,7 @@ describe("useSearchParams", () => {
     let form = node.querySelector("form");
     expect(form).toBeDefined();
 
-    let queryInput = node.querySelector("input[name=q]");
+    let queryInput = node.querySelector<HTMLInputElement>("input[name=q]");
     expect(queryInput).toBeDefined();
 
     expect(node.innerHTML).toMatch(/The current query is "Michael Jackson"/);

packages/react-router-dom/__tests__/static-location-test.js → packages/react-router-dom/__tests__/static-location-test.tsx

@@ -6,7 +6,7 @@ import { StaticRouter as Router } from "react-router-dom/server";
 describe("A <StaticRouter>", () => {
   describe("with a string location prop", () => {
     it("parses the location into an object", () => {
-      let location;
+      let location: ReturnType<typeof useLocation>;
       function LocationChecker(props) {
         location = useLocation();
         return null;
@@ -32,7 +32,7 @@ describe("A <StaticRouter>", () => {
 
   describe("with an object location prop", () => {
     it("adds missing properties", () => {
-      let location;
+      let location: ReturnType<typeof useLocation>;
       function LocationChecker(props) {
         location = useLocation();
         return null;

packages/react-router-dom/__tests__/static-navigate-test.js → packages/react-router-dom/__tests__/static-navigate-test.tsx

@@ -4,7 +4,7 @@ import { Navigate, Routes, Route } from "react-router-dom";
 import { StaticRouter as Router } from "react-router-dom/server";
 
 describe("A <Navigate> in a <StaticRouter>", () => {
-  let consoleWarn;
+  let consoleWarn: jest.SpyInstance<void, any>;
   beforeEach(() => {
     consoleWarn = jest.spyOn(console, "warn").mockImplementation(() => {});
   });

packages/react-router/__tests__/descendant-routes-splat-matching-test.js → packages/react-router/__tests__/descendant-routes-splat-matching-test.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { act, create as createTestRenderer } from "react-test-renderer";
 import { MemoryRouter as Router, Outlet, Routes, Route } from "react-router";
+import type { ReactTestRenderer } from "react-test-renderer";
 
 describe("Descendant <Routes> splat matching", () => {
   describe("when the parent route path ends with /*", () => {
@@ -32,7 +33,7 @@ describe("Descendant <Routes> splat matching", () => {
         );
       }
 
-      let renderer;
+      let renderer: ReactTestRenderer;
       act(() => {
         renderer = createTestRenderer(
           <Router initialEntries={["/courses/react/react-fundamentals"]}>

packages/react-router/__tests__/descendant-routes-warning-test.js → packages/react-router/__tests__/descendant-routes-warning-test.tsx

@@ -3,7 +3,7 @@ import { act, create as createTestRenderer } from "react-test-renderer";
 import { MemoryRouter as Router, Outlet, Routes, Route } from "react-router";
 
 describe("Descendant <Routes>", () => {
-  let consoleWarn;
+  let consoleWarn: jest.SpyInstance<void, any>;
   beforeEach(() => {
     consoleWarn = jest.spyOn(console, "warn").mockImplementation();
   });

packages/react-router/__tests__/navigate-element-test.js → packages/react-router/__tests__/navigate-element-test.tsx

@@ -4,7 +4,7 @@ import { act } from "react-dom/test-utils";
 import { MemoryRouter as Router, Navigate, Routes, Route } from "react-router";
 
 describe("navigate using an element", () => {
-  let node;
+  let node: HTMLDivElement;
   beforeEach(() => {
     node = document.createElement("div");
     document.body.appendChild(node);

packages/react-router/__tests__/path-matching-test.js → packages/react-router/__tests__/path-matching-test.tsx

@@ -1,7 +1,8 @@
 import { matchRoutes } from "react-router";
+import type { PartialRouteObject } from "react-router";
 
 describe("path matching", () => {
-  function pickPaths(routes, pathname) {
+  function pickPaths(routes: PartialRouteObject[], pathname: string) {
     let matches = matchRoutes(routes, { pathname });
     return matches ? matches.map(match => match.route.path) : null;
   }

packages/react-router/index.tsx

@@ -687,7 +687,7 @@ export function generatePath(path: string, params: Params = {}): string {
  * @see https://reactrouter.com/api/matchRoutes
  */
 export function matchRoutes(
-  routes: RouteObject[],
+  routes: PartialRouteObject[],
   location: string | PartialLocation,
   basename = ""
 ): RouteMatch[] | null {
@@ -725,13 +725,20 @@ export interface RouteMatch {
 }
 
 function flattenRoutes(
-  routes: RouteObject[],
+  routes: PartialRouteObject[],
   branches: RouteBranch[] = [],
   parentPath = "",
   parentRoutes: RouteObject[] = [],
   parentIndexes: number[] = []
 ): RouteBranch[] {
-  routes.forEach((route, index) => {
+  (routes as RouteObject[]).forEach((route, index) => {
+    route = {
+      ...route,
+      path: route.path || "/",
+      caseSensitive: !!route.caseSensitive,
+      element: route.element
+    };
+
     let path = joinPaths([parentPath, route.path]);
     let routes = parentRoutes.concat(route);
     let indexes = parentIndexes.concat(index);