test: Add React tests

packages/e2e/react-router/v6/vite.config.ts

@@ -6,6 +6,6 @@ export default defineConfig(() => ({
   plugins: [react()],
   build: {
     target: 'es2022',
-    sourcemap: 'inline' as const
+    sourcemap: true
   }
 }))

packages/e2e/react/cypress.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'e2e-shared/cypress.config'
+
+export default defineConfig({
+  baseUrl: 'http://localhost:3002'
+})

packages/e2e/react/cypress/.gitignore

@@ -0,0 +1,4 @@
+e2e/examples/
+plugins/
+screenshots/
+videos/

packages/e2e/react/cypress/e2e/shared/basic-io.cy.ts

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

packages/e2e/react/cypress/e2e/shared/hash-preservation.cy.ts

@@ -0,0 +1,5 @@
+import { testHashPreservation } from 'e2e-shared/specs/hash-preservation.cy'
+
+testHashPreservation({
+  path: '/hash-preservation'
+})

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

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

packages/e2e/react/cypress/support/e2e.ts

@@ -0,0 +1 @@
+import 'e2e-shared/cypress/support/e2e'

packages/e2e/react/package.json

@@ -5,28 +5,28 @@
   "type": "module",
   "scripts": {
     "dev": "vite --port 3002",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview",
-    "test": "pnpm run '/^test:/'",
-    "test:unit": "vitest",
-    "test:e2e": "echo 'todo: Implement e2e tests'"
+    "build": "vite build",
+    "start": "vite preview --port 3002",
+    "test": "pnpm run --stream '/^test:/'",
+    "test:types": "tsc -b",
+    "test:e2e": "start-server-and-test start http://localhost:3002 cypress:run",
+    "cypress:open": "cypress open",
+    "cypress:run": "cross-env FORCE_COLOR=3 cypress run --headless"
   },
   "dependencies": {
     "nuqs": "workspace:*",
     "react": "catalog:react19",
     "react-dom": "catalog:react19"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^22.9.0",
     "@types/react": "catalog:react19",
     "@types/react-dom": "catalog:react19",
     "@vitejs/plugin-react": "^4.3.3",
-    "globals": "^15.12.0",
-    "jsdom": "^25.0.1",
+    "cross-env": "^7.0.3",
+    "cypress": "catalog:e2e",
+    "e2e-shared": "workspace:*",
+    "start-server-and-test": "catalog:e2e",
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
     "vitest": "^2.1.5"

packages/e2e/react/src/main.tsx

@@ -1,14 +1,14 @@
-import { NuqsAdapter } from 'nuqs/adapters/next'
+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 { CounterButton } from './components/counter-button'
-import { SearchInput } from './components/search-input'
+import { Router } from './routes'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
+    <HydrationMarker />
     <NuqsAdapter>
-      <CounterButton />
-      <SearchInput />
+      <Router />
     </NuqsAdapter>
   </StrictMode>
 )

packages/e2e/react/src/routes.tsx

@@ -0,0 +1,18 @@
+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')),
+}
+
+export function Router() {
+  const Route = routes[location.pathname]
+  if (!Route) {
+    return <>404 not found</>
+  }
+  return <Route />
+}

packages/e2e/react/src/routes/basic-io.useQueryState.tsx

@@ -0,0 +1,3 @@
+import { UseQueryStateBasicIO } from 'e2e-shared/specs/basic-io'
+
+export default UseQueryStateBasicIO

packages/e2e/react/src/routes/basic-io.useQueryStates.tsx

@@ -0,0 +1,3 @@
+import { UseQueryStatesBasicIO } from 'e2e-shared/specs/basic-io'
+
+export default UseQueryStatesBasicIO

packages/e2e/react/src/routes/hash-preservation.tsx

@@ -0,0 +1,3 @@
+import { HashPreservation } from 'e2e-shared/specs/hash-preservation'
+
+export default HashPreservation

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

@@ -0,0 +1,3 @@
+import { PushUseQueryState } from 'e2e-shared/specs/push'
+
+export default PushUseQueryState

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

@@ -0,0 +1,3 @@
+import { PushUseQueryStates } from 'e2e-shared/specs/push'
+
+export default PushUseQueryStates

packages/e2e/react/tsconfig.app.json

@@ -3,7 +3,7 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "types": ["node", "@testing-library/jest-dom"],
+    "types": ["node"],
     "module": "ESNext",
     "skipLibCheck": true,
 

packages/e2e/react/tsconfig.json

@@ -1,5 +1,20 @@
 {
   "files": [],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  },
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }

packages/e2e/react/tsconfig.node.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ES2022",
     "lib": ["ES2023"],
-    "types": ["node", "@testing-library/jest-dom"],
+    "types": ["node"],
     "module": "ESNext",
     "skipLibCheck": true,
 

packages/e2e/react/vite.config.ts

@@ -4,14 +4,8 @@ import { defineConfig } from 'vite'
 // https://vitejs.dev/config/
 export default defineConfig(() => ({
   plugins: [react()],
-  // Vitest configuration
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: ['vitest.setup.ts'],
-    include: ['**/*.test.?(c|m)[jt]s?(x)'],
-    env: {
-      IS_REACT_ACT_ENVIRONMENT: 'true'
-    }
+  build: {
+    target: 'es2022',
+    sourcemap: true
   }
 }))