chore: fix for diff between React 17/18's PropsWithChildren

redwoodjs · Aug 28, 2022 · c4d1652 · c4d1652
1 parent bb40141
commit c4d1652
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/packages/router/src/router.tsx b/packages/router/src/router.tsx
@@ -123,7 +123,7 @@ function isRoute(
   return isReactElement(node) && node.type === Route
 }
 
-interface RouterProps extends RouterContextProviderProps {
+export interface RouterProps extends RouterContextProviderProps {
   trailingSlashes?: TrailingSlashesTypes
   pageLoadingDelay?: number
 }

diff --git a/packages/testing/src/web/MockProviders.tsx b/packages/testing/src/web/MockProviders.tsx
@@ -60,9 +60,10 @@ export const mockAuthClient: AuthClient = {
   type: 'custom',
 }
 
-export const MockProviders: React.FunctionComponent<PropsWithChildren> = ({
-  children,
-}) => {
+// TODO(pc): see if there are props we want to allow to be passed into our mock provider (e.g. AuthProviderProps)
+export const MockProviders: React.FunctionComponent<
+  PropsWithChildren<unknown>
+> = ({ children }) => {
   return (
     <AuthProvider client={mockAuthClient} type="custom">
       <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">

diff --git a/packages/testing/src/web/MockRouter.tsx b/packages/testing/src/web/MockRouter.tsx
@@ -5,7 +5,7 @@ import React, { PropsWithChildren } from 'react'
 // for jest and Storybook. Not doing so would cause an infinite loop.
 // See: ./packages/core/config/src/configs/browser/jest.createConfig.ts
 // @ts-ignore
-import { isRoute } from '@redwoodjs/router/dist/router'
+import { isRoute, RouterProps } from '@redwoodjs/router/dist/router'
 import { flattenAll, replaceParams } from '@redwoodjs/router/dist/util'
 // @ts-ignore
 export * from '@redwoodjs/router/dist/index'
@@ -16,9 +16,9 @@ export const routes: { [routeName: string]: () => string } = {}
  * We overwrite the default `Router` export.
  * It populates the `routes.<pagename>()` utility object.
  */
-export const Router: React.FunctionComponent<PropsWithChildren> = ({
-  children,
-}) => {
+export const Router: React.FunctionComponent<
+  PropsWithChildren<RouterProps>
+> = ({ children }) => {
   const flatChildArray = flattenAll(children)
 
   flatChildArray.forEach((child) => {