test: Add linking tests to React

Author: franky47

packages/e2e/react/cypress/e2e/shared/linking.cy.ts

@@ -0,0 +1,11 @@
+import { testLinking } from 'e2e-shared/specs/linking.cy'
+
+testLinking({
+  hook: 'useQueryState',
+  path: '/linking/useQueryState'
+})
+
+testLinking({
+  hook: 'useQueryStates',
+  path: '/linking/useQueryStates'
+})

packages/e2e/react/src/layout.tsx

@@ -0,0 +1,38 @@
+import { HydrationMarker } from 'e2e-shared/components/hydration-marker'
+import { LinkProvider, type LinkProps } from 'e2e-shared/components/link'
+import { RouterProvider, type Router } from 'e2e-shared/components/router'
+import type { ReactNode } from 'react'
+
+function Link({ href, ...props }: LinkProps) {
+  return <a href={href} {...props} />
+}
+
+export function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <HydrationMarker />
+      <LinkProvider Link={Link}>
+        <RouterProvider useRouter={useRouter}>{children}</RouterProvider>
+      </LinkProvider>
+    </>
+  )
+}
+
+function useRouter(): Router {
+  return {
+    replace(url, options) {
+      if (options.shallow) {
+        history.replaceState(history.state, '', url)
+      } else {
+        location.replace(url)
+      }
+    },
+    push(url, options) {
+      if (options.shallow) {
+        history.pushState(history.state, '', url)
+      } else {
+        location.assign(url)
+      }
+    }
+  }
+}

packages/e2e/react/src/main.tsx

@@ -1,14 +1,15 @@
-import { HydrationMarker } from 'e2e-shared/components/hydration-marker'
 import { NuqsAdapter } from 'nuqs/adapters/react'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { RootLayout } from './layout'
 import { Router } from './routes'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <HydrationMarker />
     <NuqsAdapter>
-      <Router />
+      <RootLayout>
+        <Router />
+      </RootLayout>
     </NuqsAdapter>
   </StrictMode>
 )

packages/e2e/react/src/routes.tsx

@@ -2,11 +2,15 @@ import { JSX, lazy } from 'react'
 
 // prettier-ignore
 const routes: Record<string, React.LazyExoticComponent<() => JSX.Element>> = {
-  '/hash-preservation':       lazy(() => import('./routes/hash-preservation')),
-  '/basic-io/useQueryState':  lazy(() => import('./routes/basic-io.useQueryState')),
-  '/basic-io/useQueryStates': lazy(() => import('./routes/basic-io.useQueryStates')),
-  '/push/useQueryState':      lazy(() => import('./routes/push.useQueryState')),
-  '/push/useQueryStates':     lazy(() => import('./routes/push.useQueryStates')),
+  '/hash-preservation':             lazy(() => import('./routes/hash-preservation')),
+  '/basic-io/useQueryState':        lazy(() => import('./routes/basic-io.useQueryState')),
+  '/basic-io/useQueryStates':       lazy(() => import('./routes/basic-io.useQueryStates')),
+  '/push/useQueryState':            lazy(() => import('./routes/push.useQueryState')),
+  '/push/useQueryStates':           lazy(() => import('./routes/push.useQueryStates')),
+  '/linking/useQueryState':         lazy(() => import('./routes/linking.useQueryState')),
+  '/linking/useQueryState/other':   lazy(() => import('./routes/linking.useQueryState.other')),
+  '/linking/useQueryStates':        lazy(() => import('./routes/linking.useQueryStates')),
+  '/linking/useQueryStates/other':  lazy(() => import('./routes/linking.useQueryStates.other')),
 }
 
 export function Router() {

packages/e2e/react/src/routes/linking.useQueryState.other.tsx

@@ -0,0 +1,5 @@
+import { LinkingUseQueryState } from 'e2e-shared/specs/linking'
+
+export default function Page() {
+  return <LinkingUseQueryState path="/linking/useQueryState" />
+}

packages/e2e/react/src/routes/linking.useQueryState.tsx

@@ -0,0 +1,5 @@
+import { LinkingUseQueryState } from 'e2e-shared/specs/linking'
+
+export default function Page() {
+  return <LinkingUseQueryState path="/linking/useQueryState" />
+}

packages/e2e/react/src/routes/linking.useQueryStates.other.tsx

@@ -0,0 +1,5 @@
+import { LinkingUseQueryStates } from 'e2e-shared/specs/linking'
+
+export default function Page() {
+  return <LinkingUseQueryStates path="/linking/useQueryStates" />
+}

packages/e2e/react/src/routes/linking.useQueryStates.tsx

@@ -0,0 +1,5 @@
+import { LinkingUseQueryStates } from 'e2e-shared/specs/linking'
+
+export default function Page() {
+  return <LinkingUseQueryStates path="/linking/useQueryStates" />
+}