test(e2e): retrofit all e2e sandboxes tests to use open ports

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

@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "esbuild src/main.tsx --serve=3001 --bundle --outfile=dist/main.js --watch --servedir=.",
+    "dev": "esbuild src/main.tsx --serve=3090 --bundle --outfile=dist/main.js --watch --servedir=.",
     "build": "esbuild src/main.tsx --bundle --outfile=dist/main.js",
     "serve": "esbuild src/main.tsx --bundle --outfile=dist/main.js --servedir=.",
     "start": "dev",

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

@@ -10,12 +10,12 @@ export default defineConfig({
 
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:3001/',
+    baseURL: 'http://localhost:3090/',
   },
 
   webServer: {
     command: 'pnpm run dev',
-    url: 'http://localhost:3001',
+    url: 'http://localhost:3090',
     reuseExistingServer: !process.env.CI,
     stdout: 'pipe',
   },

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

@@ -3,7 +3,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --port=3001",
+    "dev": "vite --port 3000",
+    "dev:e2e": "vite",
     "build": "vite build && tsc --noEmit",
     "serve": "vite preview",
     "start": "vite",
@@ -22,6 +23,9 @@
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^5.4.11"
+    "get-port-please": "^3.1.2",
+    "terminate": "^2.8.0",
+    "vite": "^5.4.11",
+    "wait-port": "^1.1.0"
   }
 }

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

@@ -8,17 +8,17 @@ export default defineConfig({
 
   reporter: [['line']],
 
-  use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:3001/',
-  },
+  // use: {
+  //   /* Base URL to use in actions like `await page.goto('/')`. */
+  //   baseURL: 'http://localhost:3001/',
+  // },
 
-  webServer: {
-    command: 'pnpm run dev',
-    url: 'http://localhost:3001',
-    reuseExistingServer: !process.env.CI,
-    stdout: 'pipe',
-  },
+  // webServer: {
+  //   command: 'pnpm run dev',
+  //   url: 'http://localhost:3001',
+  //   reuseExistingServer: !process.env.CI,
+  //   stdout: 'pipe',
+  // },
 
   projects: [
     {

e2e/react-router/basic-file-based-code-splitting/tests/app.spec.ts

@@ -1,7 +1,12 @@
-import { expect, test } from '@playwright/test'
+import { expect } from '@playwright/test'
+import { test } from './utils'
 
-test.beforeEach(async ({ page }) => {
-  await page.goto('/')
+test.beforeEach(async ({ page, setupApp }) => {
+  await page.goto(setupApp.ADDR + '/')
+})
+
+test.afterEach(async ({ setupApp }) => {
+  await setupApp.killProcess()
 })
 
 test('Navigating to a post page', async ({ page }) => {
@@ -11,7 +16,6 @@ test('Navigating to a post page', async ({ page }) => {
 })
 
 test('Navigating nested layouts', async ({ page }) => {
-  await page.goto('/')
   await page.getByRole('link', { name: 'Layout', exact: true }).click()
 
   await expect(page.locator('#app')).toContainText("I'm a layout")

e2e/react-router/basic-file-based-code-splitting/tests/preload.test.ts → e2e/react-router/basic-file-based-code-splitting/tests/preload.spec.ts

@@ -1,7 +1,12 @@
-import { expect, test } from '@playwright/test'
+import { expect } from '@playwright/test'
+import { test } from './utils'
 
-test.beforeEach(async ({ page }) => {
-  await page.goto('/')
+test.beforeEach(async ({ page, setupApp }) => {
+  await page.goto(setupApp.ADDR + '/')
+})
+
+test.afterEach(async ({ setupApp }) => {
+  await setupApp.killProcess()
 })
 
 test('hovering a link with preload=intent to a route without a loader should preload route', async ({

e2e/react-router/basic-file-based-code-splitting/tests/utils.ts

@@ -0,0 +1,40 @@
+import { exec } from 'node:child_process'
+import { test as baseTest } from '@playwright/test'
+import { getRandomPort } from 'get-port-please'
+import terminate from 'terminate/promise'
+import waitPort from 'wait-port'
+
+async function _setup(): Promise<{
+  PORT: number
+  PID: number
+  ADDR: string
+  killProcess: () => Promise<void>
+}> {
+  const PORT = await getRandomPort()
+  const ADDR = `http://localhost:${PORT}`
+
+  const childProcess = exec(
+    `VITE_SERVER_PORT=${PORT} pnpm run dev:e2e --port ${PORT}`,
+  )
+  childProcess.stdout?.on('data', (data) => {
+    const message = data.toString()
+    console.log('Stdout:', message)
+  })
+  await waitPort({ port: PORT })
+
+  const PID = childProcess.pid!
+  const killProcess = () => terminate(PID)
+
+  return { PORT, PID, ADDR, killProcess }
+}
+
+type SetupApp = Awaited<ReturnType<typeof _setup>>
+
+export const test = baseTest.extend<{ setupApp: SetupApp }>({
+  // don't know why playwright wants this fist argument to be destructured
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  setupApp: async ({ page }, use) => {
+    const setup = await _setup()
+    await use(setup)
+  },
+})

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

@@ -3,7 +3,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --port=3001",
+    "dev": "vite --port 3000",
+    "dev:e2e": "vite",
     "build": "vite build && tsc --noEmit",
     "serve": "vite preview",
     "start": "vite",
@@ -24,6 +25,9 @@
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^5.4.11"
+    "get-port-please": "^3.1.2",
+    "terminate": "^2.8.0",
+    "vite": "^5.4.11",
+    "wait-port": "^1.1.0"
   }
 }

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

@@ -8,17 +8,17 @@ export default defineConfig({
 
   reporter: [['line']],
 
-  use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:3001/',
-  },
+  // use: {
+  //   /* Base URL to use in actions like `await page.goto('/')`. */
+  //   baseURL: 'http://localhost:3001/',
+  // },
 
-  webServer: {
-    command: 'pnpm run dev',
-    url: 'http://localhost:3001',
-    reuseExistingServer: !process.env.CI,
-    stdout: 'pipe',
-  },
+  // webServer: {
+  //   command: 'pnpm run dev',
+  //   url: 'http://localhost:3001',
+  //   reuseExistingServer: !process.env.CI,
+  //   stdout: 'pipe',
+  // },
 
   projects: [
     {

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

@@ -1,8 +1,14 @@
-import { expect, test } from '@playwright/test'
+import { expect } from '@playwright/test'
+import { test } from './utils'
 import type { Page } from '@playwright/test'
 
-test.beforeEach(async ({ page }) => {
-  await page.goto('/')
+test.beforeEach(async ({ page, setupApp }) => {
+  const { ADDR } = setupApp
+  await page.goto(ADDR + '/')
+})
+
+test.afterEach(async ({ setupApp }) => {
+  await setupApp.killProcess()
 })
 
 test('Navigating to a post page', async ({ page }) => {
@@ -12,7 +18,6 @@ test('Navigating to a post page', async ({ page }) => {
 })
 
 test('Navigating nested layouts', async ({ page }) => {
-  await page.goto('/')
   await page.getByRole('link', { name: 'Layout', exact: true }).click()
 
   await expect(page.locator('#app')).toContainText("I'm a layout")
@@ -72,9 +77,10 @@ testCases.forEach(({ description, testId }) => {
   })
 })
 
-test('navigating to an unnested route', async ({ page }) => {
+test('navigating to an unnested route', async ({ page, setupApp }) => {
+  const { ADDR } = setupApp
   const postId = 'hello-world'
-  page.goto(`/posts/${postId}/edit`)
+  page.goto(ADDR + `/posts/${postId}/edit`)
   await expect(page.getByTestId('params-via-hook')).toContainText(postId)
   await expect(page.getByTestId('params-via-route-hook')).toContainText(postId)
   await expect(page.getByTestId('params-via-route-api')).toContainText(postId)
@@ -86,8 +92,12 @@ async function getRenderCount(page: Page) {
   )
   return renderCount
 }
-async function structuralSharingTest(page: Page, enabled: boolean) {
-  page.goto(`/structural-sharing/${enabled}/?foo=f1&bar=b1`)
+async function structuralSharingTest(
+  page: Page,
+  baseUrl: string,
+  enabled: boolean,
+) {
+  page.goto(baseUrl + `/structural-sharing/${enabled}/?foo=f1&bar=b1`)
   await expect(page.getByTestId('enabled')).toHaveText(JSON.stringify(enabled))
 
   async function checkSearch({ foo, bar }: { foo: string; bar: string }) {
@@ -107,13 +117,13 @@ async function structuralSharingTest(page: Page, enabled: boolean) {
   await checkSearch({ bar: 'b2', foo: 'f2' })
 }
 
-test('structural sharing disabled', async ({ page }) => {
-  await structuralSharingTest(page, false)
+test('structural sharing disabled', async ({ page, setupApp }) => {
+  await structuralSharingTest(page, setupApp.ADDR, false)
   expect(await getRenderCount(page)).toBeGreaterThan(2)
 })
 
-test('structural sharing enabled', async ({ page }) => {
-  await structuralSharingTest(page, true)
+test('structural sharing enabled', async ({ page, setupApp }) => {
+  await structuralSharingTest(page, setupApp.ADDR, true)
   expect(await getRenderCount(page)).toBe(2)
   await page.getByTestId('link').click()
   expect(await getRenderCount(page)).toBe(2)

e2e/react-router/basic-file-based/tests/utils.ts

@@ -0,0 +1,40 @@
+import { exec } from 'node:child_process'
+import { test as baseTest } from '@playwright/test'
+import { getRandomPort } from 'get-port-please'
+import terminate from 'terminate/promise'
+import waitPort from 'wait-port'
+
+async function _setup(): Promise<{
+  PORT: number
+  PID: number
+  ADDR: string
+  killProcess: () => Promise<void>
+}> {
+  const PORT = await getRandomPort()
+  const ADDR = `http://localhost:${PORT}`
+
+  const childProcess = exec(
+    `VITE_SERVER_PORT=${PORT} pnpm run dev:e2e --port ${PORT}`,
+  )
+  childProcess.stdout?.on('data', (data) => {
+    const message = data.toString()
+    console.log('Stdout:', message)
+  })
+  await waitPort({ port: PORT })
+
+  const PID = childProcess.pid!
+  const killProcess = () => terminate(PID)
+
+  return { PORT, PID, ADDR, killProcess }
+}
+
+type SetupApp = Awaited<ReturnType<typeof _setup>>
+
+export const test = baseTest.extend<{ setupApp: SetupApp }>({
+  // don't know why playwright wants this fist argument to be destructured
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  setupApp: async ({ page }, use) => {
+    const setup = await _setup()
+    await use(setup)
+  },
+})

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

@@ -3,7 +3,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --port=3001",
+    "dev": "vite --port 3000",
+    "dev:e2e": "vite",
     "build": "vite build && tsc --noEmit",
     "serve": "vite preview",
     "start": "vite",
@@ -25,6 +26,9 @@
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^5.4.11"
+    "get-port-please": "^3.1.2",
+    "terminate": "^2.8.0",
+    "vite": "^5.4.11",
+    "wait-port": "^1.1.0"
   }
 }

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

@@ -8,17 +8,17 @@ export default defineConfig({
 
   reporter: [['line']],
 
-  use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:3001/',
-  },
+  // use: {
+  //   /* Base URL to use in actions like `await page.goto('/')`. */
+  //   baseURL: 'http://localhost:3001/',
+  // },
 
-  webServer: {
-    command: 'pnpm run dev',
-    url: 'http://localhost:3001',
-    reuseExistingServer: !process.env.CI,
-    stdout: 'pipe',
-  },
+  // webServer: {
+  //   command: 'pnpm run dev',
+  //   url: 'http://localhost:3001',
+  //   reuseExistingServer: !process.env.CI,
+  //   stdout: 'pipe',
+  // },
 
   projects: [
     {

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

@@ -1,7 +1,12 @@
-import { expect, test } from '@playwright/test'
+import { expect } from '@playwright/test'
+import { test } from './utils'
 
-test.beforeEach(async ({ page }) => {
-  await page.goto('/')
+test.beforeEach(async ({ page, setupApp }) => {
+  await page.goto(setupApp.ADDR + '/')
+})
+
+test.afterEach(async ({ setupApp }) => {
+  await setupApp.killProcess()
 })
 
 test('Navigating to a post page', async ({ page }) => {
@@ -11,7 +16,6 @@ test('Navigating to a post page', async ({ page }) => {
 })
 
 test('Navigating nested layouts', async ({ page }) => {
-  await page.goto('/')
   await page.getByRole('link', { name: 'Layout', exact: true }).click()
 
   await expect(page.locator('#app')).toContainText("I'm a layout")