test(e2e): derive e2e testing ports from the package name (#2939)

* test(e2e): add the derivePort utility

* test(e2e): use the utility on start-basic and start-website

* test(e2e): use the utility on the remaining start sandboxes

* test(e2e): use the utility on the react-router sandboxes

* test(e2e): remove unneeded script from `basic-esbuild-file-based`

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

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5601
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -17,7 +19,7 @@ export default defineConfig({
   },
 
   webServer: {
-    command: `pnpm run dev`,
+    command: `pnpm run build && pnpm run serve --serve=${PORT}`,
     url: baseURL,
     reuseExistingServer: !process.env.CI,
     stdout: 'pipe',

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

@@ -3,6 +3,12 @@
     "strict": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "skipLibCheck": true
-  }
+    "target": "ESNext",
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowJs": true
+  },
+  "exclude": ["node_modules", "dist"]
 }

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

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5603
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.

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

@@ -5,7 +5,10 @@
     "jsx": "react-jsx",
     "target": "ESNext",
     "moduleResolution": "Bundler",
-    "noEmit": true,
-    "skipLibCheck": true
-  }
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowJs": true
+  },
+  "exclude": ["node_modules", "dist"]
 }

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

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5602
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.

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

@@ -3,6 +3,12 @@
     "strict": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "skipLibCheck": true
-  }
+    "target": "ESNext",
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowJs": true
+  },
+  "exclude": ["node_modules", "dist"]
 }

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

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5605
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.

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

@@ -4,6 +4,11 @@
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "target": "ESNext",
-    "moduleResolution": "Bundler"
-  }
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowJs": true
+  },
+  "exclude": ["node_modules", "dist"]
 }

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

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5604
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.

e2e/react-router/basic-react-query/tsconfig.json

@@ -5,6 +5,10 @@
     "jsx": "react-jsx",
     "target": "ESNext",
     "moduleResolution": "Bundler",
-    "module": "ESNext"
-  }
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowJs": true
+  },
+  "exclude": ["node_modules", "dist"]
 }

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

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5606
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.

e2e/react-router/basic-scroll-restoration/tsconfig.json

@@ -5,6 +5,10 @@
     "jsx": "react-jsx",
     "target": "ESNext",
     "moduleResolution": "Bundler",
-    "module": "ESNext"
-  }
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowJs": true
+  },
+  "exclude": ["node_modules", "dist"]
 }

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

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5607
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.

e2e/react-router/basic-virtual-file-based/tsconfig.json

@@ -3,8 +3,12 @@
     "strict": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "module": "Preserve",
+    "target": "ESNext",
     "moduleResolution": "Bundler",
-    "target": "ESNext"
-  }
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowJs": true
+  },
+  "exclude": ["node_modules", "dist"]
 }

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

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5608
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.

e2e/react-router/basic-virtual-named-export-config-file-based/tsconfig.json

@@ -3,8 +3,12 @@
     "strict": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "module": "Preserve",
+    "target": "ESNext",
     "moduleResolution": "Bundler",
-    "target": "ESNext"
-  }
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowJs": true
+  },
+  "exclude": ["node_modules", "dist"]
 }

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

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5600
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.

e2e/react-router/basic/tsconfig.json

@@ -5,6 +5,9 @@
     "jsx": "react-jsx",
     "target": "ESNext",
     "moduleResolution": "Bundler",
-    "module": "ESNext"
-  }
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "allowJs": true
+  },
+  "exclude": ["node_modules", "dist"]
 }

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

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5609
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.

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

@@ -2,6 +2,13 @@
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "jsx": "react-jsx"
-  }
+    "jsx": "react-jsx",
+    "target": "ESNext",
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowJs": true
+  },
+  "exclude": ["node_modules", "dist"]
 }

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

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5610
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.

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

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5611
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.

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

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5612
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.

e2e/start/basic/playwright.config.ts

@@ -1,7 +1,10 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5609
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */

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

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5613
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.

e2e/start/website/playwright.config.ts

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
 
-const PORT = 5614
+const PORT = derivePort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
  * See https://playwright.dev/docs/test-configuration.

e2e/utils.js

@@ -0,0 +1,20 @@
+import * as crypto from 'node:crypto'
+
+/**
+ * Hash a string and map it to a range [min, max].
+ * @param {string} input - The string to hash.
+ * @param {number} min - Minimum port value.
+ * @param {number} max - Maximum port value.
+ * @returns {number} A port within the range [min, max].
+ */
+export function derivePort(input, min = 5600, max = 65535) {
+  // Hash the input using SHA-256
+  const hash = crypto.createHash('sha256').update(input).digest('hex')
+
+  // Convert hash to an integer
+  const hashInt = parseInt(hash.slice(0, 8), 16) // Use the first 8 characters
+
+  // Map hash value to the port range
+  const port = min + (hashInt % (max - min + 1))
+  return port
+}

tsconfig.json

@@ -23,5 +23,10 @@
     "strict": true,
     "target": "ES2020"
   },
-  "include": ["eslint.config.js", "prettier.config.js", "scripts"]
+  "include": [
+    "eslint.config.js",
+    "prettier.config.js",
+    "scripts",
+    "e2e/utils.js"
+  ]
 }