tests: create shared, non-published package for e2e utils (#3296)

Author: schiller-manuel

e2e/e2e-utils/eslint.config.js

@@ -0,0 +1,5 @@
+// @ts-check
+
+import rootConfig from '../../eslint.config.js'
+
+export default [...rootConfig]

e2e/e2e-utils/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@tanstack/router-e2e-utils",
+  "private": true,
+  "scripts": {
+    "clean": "rimraf ./dist && rimraf ./coverage",
+    "test:eslint": "eslint ./src",
+    "test:unit": "exit 0; vitest --typecheck",
+    "build": "vite build && tsc --noEmit"
+  },
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}

e2e/utils.js e2e/e2e-utils/src/derivePort.ts

@@ -7,7 +7,11 @@ import * as crypto from 'node:crypto'
  * @param {number} max - Maximum port value.
  * @returns {number} A port within the range [min, max].
  */
-export function derivePort(input, min = 5600, max = 65535) {
+export function derivePort(
+  input: string,
+  min: number = 5600,
+  max: number = 65535,
+): number {
   // Hash the input using SHA-256
   const hash = crypto.createHash('sha256').update(input).digest('hex')
 

e2e/e2e-utils/src/index.ts

@@ -0,0 +1 @@
+export { derivePort } from './derivePort'

e2e/e2e-utils/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src", "vite.config.ts", "tests"]
+}

e2e/e2e-utils/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import { tanstackViteConfig } from '@tanstack/config/vite'
+import packageJson from './package.json'
+
+const config = defineConfig({
+  test: {
+    name: packageJson.name,
+    dir: './tests',
+    watch: false,
+    typecheck: { enabled: true },
+  },
+})
+
+export default mergeConfig(
+  config,
+  tanstackViteConfig({
+    entry: './src/index.ts',
+    srcDir: './src',
+  }),
+)

e2e/react-router/basic-esbuild-file-based/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "dev": "esbuild src/main.tsx --serve=5601 --bundle --outfile=dist/main.js --watch --servedir=.",
-    "build": "esbuild src/main.tsx --bundle --outfile=dist/main.js",
+    "build": "esbuild src/main.tsx --bundle --outfile=dist/main.js && tsc --noEmit",
     "serve": "esbuild src/main.tsx --bundle --outfile=dist/main.js --servedir=.",
     "start": "dev",
     "test:e2e": "playwright test --project=chromium"
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tanstack/router-e2e-utils": "workspace:^",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "esbuild": "^0.24.2"

e2e/react-router/basic-esbuild-file-based/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
-import { derivePort } from '../../utils.js'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
 const PORT = derivePort(packageJson.name)

e2e/react-router/basic-file-based-code-splitting/package.json

@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tanstack/router-e2e-utils": "workspace:^",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.3.4",

e2e/react-router/basic-file-based-code-splitting/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
-import { derivePort } from '../../utils.js'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
 const PORT = derivePort(packageJson.name)

e2e/react-router/basic-file-based/package.json

@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tanstack/router-e2e-utils": "workspace:^",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.3.4",

e2e/react-router/basic-file-based/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
-import { derivePort } from '../../utils.js'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
 const PORT = derivePort(packageJson.name)

e2e/react-router/basic-file-based/tests/redirect.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test'
 import combinateImport from 'combinate'
-import { derivePort } from '../../../utils'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from '../package.json' with { type: 'json' }
 
 // somehow playwright does not correctly import default exports

e2e/react-router/basic-react-query-file-based/package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tanstack/router-e2e-utils": "workspace:^",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.3.4",

e2e/react-router/basic-react-query-file-based/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
-import { derivePort } from '../../utils.js'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
 const PORT = derivePort(packageJson.name)

e2e/react-router/basic/package.json

@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tanstack/router-e2e-utils": "workspace:^",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.3.4",

e2e/react-router/basic/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
-import { derivePort } from '../../utils.js'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
 const PORT = derivePort(packageJson.name)

e2e/react-router/scroll-restoration-sandbox-vite/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "vite --port 3000",
     "dev:e2e": "vite",
-    "build": "vite build",
+    "build": "vite build && tsc --noEmit",
     "serve": "vite preview",
     "start": "vite",
     "test:e2e": "playwright test --project=chromium"
@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tanstack/router-e2e-utils": "workspace:^",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.3.4",

e2e/react-router/scroll-restoration-sandbox-vite/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
-import { derivePort } from '../../utils.js'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
 const PORT = derivePort(packageJson.name)

e2e/react-router/sentry-integration/package.json

@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tanstack/router-e2e-utils": "workspace:^",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.3.4",

e2e/react-router/sentry-integration/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
-import { derivePort } from '../../utils.js'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
 const PORT = derivePort(packageJson.name)

e2e/start/basic-auth/package.json

@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tanstack/router-e2e-utils": "workspace:^",
     "@types/node": "^22.10.2",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",

e2e/start/basic-auth/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
-import { derivePort } from '../../utils.js'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
 const PORT = derivePort(packageJson.name)

e2e/start/basic-react-query/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vinxi dev --port 3000",
     "dev:e2e": "vinxi dev",
-    "build": "vinxi build",
+    "build": "vinxi build && tsc --noEmit",
     "start": "vinxi start",
     "test:e2e": "playwright test --project=chromium"
   },
@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tanstack/router-e2e-utils": "workspace:^",
     "@types/node": "^22.10.2",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",

e2e/start/basic-react-query/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
-import { derivePort } from '../../utils.js'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
 const PORT = derivePort(packageJson.name)

e2e/start/basic-tsr-config/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vinxi dev --port 3000",
     "dev:e2e": "vinxi dev",
-    "build": "vinxi build",
+    "build": "vinxi build && tsc --noEmit",
     "start": "vinxi start",
     "test:e2e": "playwright test --project=chromium"
   },
@@ -18,6 +18,7 @@
     "vinxi": "0.5.1"
   },
   "devDependencies": {
+    "@tanstack/router-e2e-utils": "workspace:^",
     "@types/node": "^22.10.2",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",

e2e/start/basic-tsr-config/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
-import { derivePort } from '../../utils.js'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
 const PORT = derivePort(packageJson.name)

e2e/start/basic/app/client.tsx

@@ -3,8 +3,6 @@ import { hydrateRoot } from 'react-dom/client'
 import { StartClient } from '@tanstack/start'
 import { createRouter } from './router'
 
-const router = createRouter({
-  scrollRestoration: true,
-})
+const router = createRouter()
 
 hydrateRoot(document, <StartClient router={router} />)

e2e/start/basic/app/routes/stream.tsx

@@ -25,7 +25,7 @@ const decoder = new TextDecoder('utf-8')
 
 function Home() {
   const { promise, stream } = Route.useLoaderData()
-  const [streamData, setStreamData] = useState([])
+  const [streamData, setStreamData] = useState<Array<string>>([])
 
   useEffect(() => {
     async function fetchStream() {

e2e/start/basic/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vinxi dev --port 3000",
     "dev:e2e": "vinxi dev",
-    "build": "vinxi build",
+    "build": "vinxi build && tsc --noEmit",
     "start": "vinxi start",
     "test:e2e": "playwright test --project=chromium"
   },
@@ -26,6 +26,7 @@
     "@types/node": "^22.10.2",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",
+    "@tanstack/router-e2e-utils": "workspace:^",
     "@vitejs/plugin-react": "^4.3.4",
     "combinate": "^1.1.11",
     "postcss": "^8.5.1",

e2e/start/basic/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
-import { derivePort } from '../../utils.js'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
 const PORT = derivePort(packageJson.name)

e2e/start/basic/tests/redirect.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 import combinateImport from 'combinate'
-import { derivePort } from '../../../utils'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from '../package.json' with { type: 'json' }
 import { test } from './fixture'
 

e2e/start/clerk-basic/package.json

@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tanstack/router-e2e-utils": "workspace:^",
     "@types/node": "^22.10.2",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",

e2e/start/clerk-basic/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
-import { derivePort } from '../../utils.js'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
 const PORT = derivePort(packageJson.name)

e2e/start/scroll-restoration/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vinxi dev --port 3000",
     "dev:e2e": "vinxi dev",
-    "build": "vinxi build",
+    "build": "vinxi build && tsc --noEmit",
     "start": "vinxi start",
     "test:e2e": "playwright test --project=chromium"
   },
@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tanstack/router-e2e-utils": "workspace:^",
     "@types/node": "^22.10.2",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",

e2e/start/scroll-restoration/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
-import { derivePort } from '../../utils.js'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
 const PORT = derivePort(packageJson.name)

e2e/start/website/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vinxi dev --port 3000",
     "dev:e2e": "vinxi dev",
-    "build": "vinxi build",
+    "build": "vinxi build && tsc --noEmit",
     "start": "vinxi start",
     "test:e2e": "playwright test --project=chromium"
   },
@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tanstack/router-e2e-utils": "workspace:^",
     "@types/node": "^22.10.2",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",

e2e/start/website/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
-import { derivePort } from '../../utils.js'
+import { derivePort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
 const PORT = derivePort(packageJson.name)

pnpm-lock.yaml

@@ -4,5 +4,6 @@ packages:
   - 'examples/react/router-monorepo-react-query/packages/*'
   - 'examples/react/router-monorepo-simple/packages/*'
   - 'examples/react/router-monorepo-simple-lazy/packages/*'
+  - 'e2e/e2e-utils'
   - 'e2e/react-router/*'
   - 'e2e/start/*'