feat: add dummy server scripts and update test commands for prerendering

Author: FatahChan

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

@@ -8,8 +8,10 @@
     "dev:e2e": "vite dev",
     "build": "vite build && tsc --noEmit",
     "start": "pnpx srvx --prod -s ../client  dist/server/server.js",
-    "test:e2e:ssrMode": "rm -rf port*.txt; playwright test --project=chromium --ui",
-    "test:e2e": "pnpm run test:e2e:ssrMode"
+    "test:e2e:ssrMode": "playwright test --project=chromium",
+    "test:e2e:dummyServer": "node start-dummy-server.mjs &",
+    "test:e2e:stopDummyServer": "node stop-dummy-server.mjs",
+    "test:e2e": "rm -rf port*.txt;  pnpm run test:e2e:ssrMode"
   },
   "dependencies": {
     "@tanstack/react-router": "workspace:^",

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

@@ -10,7 +10,8 @@ const PORT = await getTestServerPort(
 )
 const EXTERNAL_PORT = await getDummyServerPort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
-const ssrModeCommand = `pnpm build && pnpm start`
+
+const ssrModeCommand = `pnpm test:e2e:dummyServer && pnpm build && pnpm test:e2e:stopDummyServer && pnpm start`
 
 /**
  * See https://playwright.dev/docs/test-configuration.

e2e/react-start/basic-prerendering/start-dummy-server.mjs

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+
+import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+console.log('Starting dummy server...')
+await e2eStartDummyServer(packageJson.name)
+console.log('Dummy server started successfully!')
+
+// Keep the process running non-interactively
+process.stdin.pause()

e2e/react-start/basic-prerendering/stop-dummy-server.mjs

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+console.log('Stopping dummy server...')
+await e2eStopDummyServer(packageJson.name)
+console.log('Dummy server stopped successfully!')

e2e/react-start/basic-prerendering/tests/prerender-discovery.spec.ts renamed to e2e/react-start/basic-prerendering/tests/prerendering.spec.ts

@@ -1,4 +1,4 @@
-import { existsSync } from 'node:fs'
+import { existsSync, readFileSync } from 'node:fs'
 import { join } from 'node:path'
 import { expect } from '@playwright/test'
 import { test } from '@tanstack/router-e2e-utils'
@@ -8,10 +8,10 @@ test.describe('Prerender Static Path Discovery', () => {
     test('should automatically discover and prerender static routes', () => {
       // Check that static routes were automatically discovered and prerendered
       const distDir = join(process.cwd(), 'dist', 'client')
-      
+
       // These static routes should be automatically discovered and prerendered
       expect(existsSync(join(distDir, 'index.html'))).toBe(true) // / (index)
-      expect(existsSync(join(distDir, 'posts.html',))).toBe(true) // /posts
+      expect(existsSync(join(distDir, 'posts.html'))).toBe(true) // /posts
       expect(existsSync(join(distDir, 'users.html'))).toBe(true) // /users
       expect(existsSync(join(distDir, 'deferred.html'))).toBe(true) // /deferred
       expect(existsSync(join(distDir, 'scripts.html'))).toBe(true) // /scripts
@@ -20,42 +20,32 @@ test.describe('Prerender Static Path Discovery', () => {
 
       // Pathless layouts should NOT be prerendered (they start with _)
       expect(existsSync(join(distDir, '_layout', 'index.html'))).toBe(false) // /_layout
-      
+
       // API routes should NOT be prerendered
-      expect(existsSync(join(distDir, 'api', 'users', 'index.html'))).toBe(false) // /api/users
+      
+      expect(existsSync(join(distDir, 'api', 'users', 'index.html'))).toBe(
+        false,
+      ) // /api/users
     })
   })
 
-  test.describe('Static Route Prerendering Verification', () => {
-    test('should serve prerendered home page with server-side content', async ({ page }) => {
-      await page.goto('/')
-      
-      // Verify the page loads and contains expected content
-      await expect(page.locator('h3')).toContainText('Welcome Home!!!')
-      
-      // Check that it was server-side rendered (no hydration flicker)
-      const html = await page.content()
-      expect(html).toContain('Welcome Home!!!') // Content should be in initial HTML
-      expect(html).toContain('Hello from a custom component!') // Component content should be in initial HTML
-    })
+  test.describe('Static Files Verification', () => {
+    test('should contain prerendered content in posts.html', async () => {
+      const distDir = join(process.cwd(), 'dist', 'client')
+      expect(existsSync(join(distDir, 'posts.html'))).toBe(true) // /posts
 
-    test('should serve prerendered posts index page', async ({ page }) => {
-      await page.goto('/posts')
-      // domContentLoaded event
-      await page.waitForLoadState('domcontentloaded')
-      // Check for server-side rendered content
-      const html = await page.content()
-      await page.pause();
+      // "Select a post." should be in the prerendered HTML
+      const html = readFileSync(join(distDir, 'posts.html'), 'utf-8')
       expect(html).toContain('Select a post.') // Content should be in initial HTML
     })
 
-    test('should serve prerendered users index page', async ({ page }) => {
-      await page.goto('/users')
-      
-      // Check for server-side rendered content
-      const html = await page.content()
-      await page.pause();
+    test('should contain prerendered content in users.html', async () => {
+      const distDir = join(process.cwd(), 'dist', 'client')
+      expect(existsSync(join(distDir, 'users.html'))).toBe(true) // /users
+
+      // "Select a user." should be in the prerendered HTML
+      const html = readFileSync(join(distDir, 'users.html'), 'utf-8')
       expect(html).toContain('Select a user.') // Content should be in initial HTML
     })
   })
-})
+})