Fix all TS issues in the tests

packages/router/src/__tests__/analyzeRoutes.test.tsx

@@ -6,9 +6,19 @@ import { analyzeRoutes } from '../util'
 
 const FakePage = () => <h1>Fake Page</h1>
 
-const FakeLayout1 = ({ children }) => <div className="layout1">{children}</div>
-const FakeLayout2 = ({ children }) => <div className="layout2">{children}</div>
-const FakeLayout3 = ({ children }) => <div className="layout2">{children}</div>
+interface LayoutProps {
+  children: React.ReactNode
+}
+
+const FakeLayout1 = ({ children }: LayoutProps) => (
+  <div className="layout1">{children}</div>
+)
+const FakeLayout2 = ({ children }: LayoutProps) => (
+  <div className="layout2">{children}</div>
+)
+const FakeLayout3 = ({ children }: LayoutProps) => (
+  <div className="layout2">{children}</div>
+)
 
 describe('AnalyzeRoutes: with homePage and Children', () => {
   const CheckRoutes = (

packages/router/src/__tests__/links.test.tsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { toHaveClass, toHaveStyle } from '@testing-library/jest-dom/matchers'
 import { render } from '@testing-library/react'
+
 // TODO: Remove when jest configs are in place
+// @ts-expect-error - Issue with TS and jest-dom
 expect.extend({ toHaveClass, toHaveStyle })
 
 import { NavLink, useMatch, Link } from '../links'
@@ -284,7 +286,10 @@ describe('<NavLink />', () => {
 })
 
 describe('useMatch', () => {
-  const MyLink = ({ to, ...rest }) => {
+  const MyLink = ({
+    to,
+    ...rest
+  }: React.ComponentPropsWithoutRef<typeof Link>) => {
     const [pathname, queryString] = to.split('?')
     const matchInfo = useMatch(pathname, {
       searchParams: flattenSearchParams(queryString),

packages/router/src/__tests__/route-announcer.test.tsx

@@ -51,6 +51,7 @@ const EmptyH1Page = () => (
 
 beforeEach(() => {
   window.history.pushState({}, '', '/')
+  // @ts-expect-error - No type gen here for routes like there is in a real app
   Object.keys(routes).forEach((key) => delete routes[key])
 })
 
@@ -94,6 +95,7 @@ test('gets the announcement in the correct order of priority', async () => {
 
   // navigate to h1
   // since there's no RouteAnnouncement, it should announce the h1.
+  // @ts-expect-error - No type gen here for routes like there is in a real app
   act(() => navigate(routes.h1()))
   await waitFor(() => {
     screen.getByText(/H1 Page/i)
@@ -102,6 +104,7 @@ test('gets the announcement in the correct order of priority', async () => {
 
   // navigate to noH1.
   // since there's no h1, it should announce the title.
+  // @ts-expect-error - No type gen here for routes like there is in a real app
   act(() => navigate(routes.noH1()))
   await waitFor(() => {
     screen.getByText(/NoH1 Page/i)
@@ -113,6 +116,7 @@ test('gets the announcement in the correct order of priority', async () => {
   // navigate to noH1OrTitle.
   // since there's no h1 or title,
   // it should announce the location.
+  // @ts-expect-error - No type gen here for routes like there is in a real app
   act(() => navigate(routes.noH1OrTitle()))
   await waitFor(() => {
     screen.getByText(/NoH1OrTitle Page/i)

packages/router/src/__tests__/route-focus.test.tsx

@@ -20,6 +20,7 @@ const NoRouteFocusPage = () => <h1>No Route Focus Page</h1>
 
 const RouteFocusNoChildren = () => (
   <>
+    {/* @ts-expect-error - Testing a JS scenario */}
     <RouteFocus></RouteFocus>
     <h1>Route Focus No Children Page</h1>
     <p></p>
@@ -45,7 +46,8 @@ const RouteFocusNegativeTabIndexPage = () => (
 )
 
 beforeEach(() => {
-  window.history.pushState({}, null, '/')
+  window.history.pushState({}, '', '/')
+  // @ts-expect-error - No type gen here for routes like there is in a real app
   Object.keys(routes).forEach((key) => delete routes[key])
 })
 

packages/router/src/__tests__/router.test.tsx

@@ -29,7 +29,7 @@ import {
   waitFor,
 } from '@testing-library/react'
 
-import type { AuthContextInterface } from '@redwoodjs/auth'
+import type { AuthContextInterface, UseAuth } from '@redwoodjs/auth'
 
 import {
   back,
@@ -143,6 +143,10 @@ const mockUseAuth =
     })
   }
 
+interface LayoutProps {
+  children: React.ReactNode
+}
+
 const HomePage = () => <h1>Home Page</h1>
 const LoginPage = () => <h1>Login Page</h1>
 const AboutPage = () => <h1>About Page</h1>
@@ -188,7 +192,7 @@ describe('slow imports', () => {
     )
   }
 
-  const PageLoadingContextLayout = ({ children }) => {
+  const PageLoadingContextLayout = ({ children }: LayoutProps) => {
     const { loading } = usePageLoadingContext()
 
     return (
@@ -463,7 +467,7 @@ describe('slow imports', () => {
   test(
     'path params should never be empty',
     async () => {
-      const PathParamPage = ({ value }) => {
+      const PathParamPage = ({ value }: { value: string }) => {
         expect(value).not.toBeFalsy()
         return <p>{value}</p>
       }
@@ -924,7 +928,7 @@ test('inits routes two private routes with a space in between and loads as expec
 
       <Route
         path="/param-test/:value"
-        page={({ value }) => <div>param {value}</div>}
+        page={({ value }: { value: string }) => <div>param {value}</div>}
         name="params"
       />
     </Router>
@@ -936,7 +940,7 @@ test('inits routes two private routes with a space in between and loads as expec
 })
 
 test('supports <Set>', async () => {
-  const GlobalLayout = ({ children }) => (
+  const GlobalLayout = ({ children }: LayoutProps) => (
     <div>
       <h1>Global Layout</h1>
       {children}
@@ -967,7 +971,7 @@ test('supports <Set>', async () => {
 })
 
 test('can use named routes for navigating', async () => {
-  const MainLayout = ({ children }) => {
+  const MainLayout = ({ children }: LayoutProps) => {
     return (
       <div>
         <h1>Main Layout</h1>
@@ -999,7 +1003,7 @@ test('can use named routes for navigating', async () => {
 })
 
 test('renders only active path', async () => {
-  const AboutLayout = ({ children }) => {
+  const AboutLayout = ({ children }: LayoutProps) => {
     return (
       <div>
         <h1>About Layout</h1>
@@ -1009,7 +1013,7 @@ test('renders only active path', async () => {
     )
   }
 
-  const LoginLayout = ({ children }) => {
+  const LoginLayout = ({ children }: LayoutProps) => {
     return (
       <div>
         <h1>Login Layout</h1>
@@ -1169,10 +1173,10 @@ test('params should never be an empty object in Set', async () => {
     return <div>Param Page</div>
   }
 
-  const SetWithUseParams = ({ children }) => {
+  const SetWithUseParams = ({ children }: LayoutProps) => {
     const params = useParams()
     expect(params).not.toEqual({})
-    return children
+    return <>{children}</>
   }
 
   const TestRouter = () => (
@@ -1194,12 +1198,12 @@ test('params should never be an empty object in Set with waitFor (I)', async ()
     return <>documentId: {documentId}</>
   }
 
-  const SetWithUseParams = ({ children }) => {
+  const SetWithUseParams = ({ children }: LayoutProps) => {
     const params = useParams()
     // 1st run: { documentId: '1' }
     // 2nd run: { documentId: '2' }
     expect(params).not.toEqual({})
-    return children
+    return <>{children}</>
   }
 
   const TestRouter = () => (
@@ -1224,12 +1228,12 @@ test('params should never be an empty object in Set without waitFor (II)', async
     return <>documentId: {documentId}</>
   }
 
-  const SetWithUseParams = ({ children }) => {
+  const SetWithUseParams = ({ children }: LayoutProps) => {
     const params = useParams()
     // 1st run: { documentId: '1' }
     // 2nd run: { documentId: '2' }
     expect(params).not.toEqual({})
-    return children
+    return <>{children}</>
   }
 
   const TestRouter = () => (
@@ -1254,10 +1258,10 @@ test('Set is not rendered for unauthenticated user.', async () => {
     return null
   }
 
-  const SetWithUseParams = ({ children }) => {
+  const SetWithUseParams = ({ children }: LayoutProps) => {
     // This should never be called. We should be redirected to login instead.
     expect(false).toBe(true)
-    return children
+    return <>{children}</>
   }
 
   const TestRouter = () => (
@@ -1287,10 +1291,10 @@ test('Set is not rendered for unauthenticated user on direct navigation', async
     return null
   }
 
-  const SetWithUseParams = ({ children }) => {
+  const SetWithUseParams = ({ children }: LayoutProps) => {
     // This should never be called. We should be redirected to login instead.
     expect(false).toBe(true)
-    return children
+    return <>{children}</>
   }
 
   const TestRouter = () => (
@@ -1312,7 +1316,12 @@ test('Set is not rendered for unauthenticated user on direct navigation', async
 
 // TODO: Remove this entire test once we remove the `<Private>` component
 test('Private is an alias for Set private', async () => {
-  const PrivateLayout = ({ children, theme }) => (
+  interface PrivateLayoutProps {
+    children: React.ReactNode
+    theme: string
+  }
+
+  const PrivateLayout = ({ children, theme }: PrivateLayoutProps) => (
     <div>
       <h1>Private Layout ({theme})</h1>
       {children}
@@ -1322,7 +1331,11 @@ test('Private is an alias for Set private', async () => {
   const TestRouter = () => (
     <Router useAuth={mockUseAuth({ isAuthenticated: true })}>
       <Route path="/" page={HomePage} name="home" />
-      <Private wrap={PrivateLayout} unauthenticated="home" theme="dark">
+      <Private<PrivateLayoutProps>
+        wrap={PrivateLayout}
+        unauthenticated="home"
+        theme="dark"
+      >
         <Route path="/private" page={PrivatePage} name="private" />
       </Private>
     </Router>
@@ -1409,7 +1422,7 @@ test('jump to new route, then go back', async () => {
 })
 
 test('redirect replacing route', async () => {
-  const ListWithDefaultParamsPage = (props) => {
+  const ListWithDefaultParamsPage = (props: { _limit: string }) => {
     if (props['_limit']) {
       return <h1>List Page</h1>
     }
@@ -1554,7 +1567,7 @@ test('should handle ref and key as search params', async () => {
 })
 
 describe('Unauthorized redirect error messages', () => {
-  let err
+  let err: typeof console.error
 
   beforeAll(() => {
     err = console.error
@@ -1606,17 +1619,26 @@ describe('Multiple nested private sets', () => {
   const PrivateEmployeePage = () => <h1>Private Employee Page</h1>
   const PrivateAdminPage = () => <h1>Private Admin Page</h1>
 
-  const LevelLayout = ({ children, level }) => (
+  interface LevelLayoutProps {
+    children: React.ReactNode
+    level: string
+  }
+
+  const LevelLayout = ({ children, level }: LevelLayoutProps) => (
     <div>
       Level: {level}
       {children}
     </div>
   )
 
-  const TestRouter = ({ useAuthMock }) => (
+  const TestRouter = ({ useAuthMock }: { useAuthMock: UseAuth }) => (
     <Router useAuth={useAuthMock}>
       <Route path="/" page={HomePage} name="home" />
-      <PrivateSet unauthenticated="home" level="1" wrap={LevelLayout}>
+      <PrivateSet<LevelLayoutProps>
+        unauthenticated="home"
+        level="1"
+        wrap={LevelLayout}
+      >
         <Route
           path="/no-roles-assigned"
           page={PrivateNoRolesAssigned}
@@ -1720,7 +1742,14 @@ describe('Multiple nested sets', () => {
   const HomePage = () => <h1>Home Page</h1>
   const Page = () => <h1>Page</h1>
 
-  const DebugLayout = (props) => {
+  interface DebugLayoutProps {
+    children: React.ReactNode
+    theme: string
+    otherProp?: string
+    level: string
+  }
+
+  const DebugLayout = (props: DebugLayoutProps) => {
     return (
       <div>
         <p>Theme: {props.theme}</p>
@@ -1734,7 +1763,7 @@ describe('Multiple nested sets', () => {
   const TestRouter = () => (
     <Router>
       <Route path="/" page={HomePage} name="home" />
-      <Set level="1" theme="blue" wrap={DebugLayout}>
+      <Set<DebugLayoutProps> level="1" theme="blue" wrap={DebugLayout}>
         <Route path="/level1" page={Page} name="level1" />
         <Set level="2" theme="red" otherProp="bazinga">
           <Route path="/level2" page={Page} name="level2" />