Add tests for SSR server (#2730)

pascalbaljet · web-flow · commit 5dd64a943172 · 2025-12-02T15:34:37.000+01:00
* wip

* Update playwright-chromium.yml

* Update ssr.ts

* Update Page1.svelte

* Update ssr.spec.ts

* Fix code style
diff --git a/.github/workflows/playwright-chromium.yml b/.github/workflows/playwright-chromium.yml
@@ -42,3 +42,45 @@ jobs:
         with:
           name: playwright-failure-screenshots-${{ matrix.adapter }}-chromium
           path: test-results
+
+  test-chromium-ssr:
+    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.repository
+    name: Chromium SSR (${{ matrix.adapter }})
+    timeout-minutes: 15
+    runs-on: ubuntu-24.04
+    strategy:
+      matrix:
+        adapter: ['vue', 'react', 'svelte']
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.14
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build Inertia
+        run: pnpm -r --filter ./packages/core --filter ./packages/${{ matrix.adapter }}* build
+
+      - name: Install Playwright Browsers
+        run: pnpm playwright install chromium
+
+      - name: Run Playwright SSR Tests
+        run: pnpm test:ssr:${{ matrix.adapter }} --project=chromium
+
+      - name: Upload failure screenshots
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-failure-screenshots-${{ matrix.adapter }}-chromium-ssr
+          path: test-results
diff --git a/package.json b/package.json
@@ -25,6 +25,9 @@
     "test:react": "PACKAGE=react node playwright.js",
     "test:svelte": "PACKAGE=svelte node playwright.js",
     "test:vue": "PACKAGE=vue3 node playwright.js",
+    "test:ssr:react": "PACKAGE=react SSR=true npx playwright test",
+    "test:ssr:svelte": "PACKAGE=svelte SSR=true npx playwright test",
+    "test:ssr:vue": "PACKAGE=vue3 SSR=true npx playwright test",
     "playground:react": "cd playgrounds/react && ./init.sh && composer run dev",
     "playground:svelte4": "cd playgrounds/svelte4 && ./init.sh && composer run dev",
     "playground:svelte5": "cd playgrounds/svelte5 && ./init.sh && composer run dev",
diff --git a/packages/react/test-app/Pages/SSR/Page1.tsx b/packages/react/test-app/Pages/SSR/Page1.tsx
@@ -0,0 +1,26 @@
+import { Link } from '@inertiajs/react'
+
+export default ({ user, items, count }: { user: { name: string; email: string }; items: string[]; count: number }) => (
+  <div>
+    <h1 data-testid="ssr-title">SSR Page 1</h1>
+
+    <div data-testid="user-info">
+      <p data-testid="user-name">Name: {user.name}</p>
+      <p data-testid="user-email">Email: {user.email}</p>
+    </div>
+
+    <ul data-testid="items-list">
+      {items.map((item) => (
+        <li key={item} data-testid="item">
+          {item}
+        </li>
+      ))}
+    </ul>
+
+    <p data-testid="count">Count: {count}</p>
+
+    <Link href="/ssr/page2" data-testid="navigate-link">
+      Navigate to another page
+    </Link>
+  </div>
+)
diff --git a/packages/react/test-app/Pages/SSR/Page2.tsx b/packages/react/test-app/Pages/SSR/Page2.tsx
@@ -0,0 +1,12 @@
+import { Link } from '@inertiajs/react'
+
+export default ({ navigatedTo }: { navigatedTo: boolean }) => (
+  <div>
+    <h1 data-testid="ssr-title">SSR Page 2</h1>
+    <p data-testid="navigated-status">Navigated: {String(navigatedTo)}</p>
+
+    <Link href="/ssr/page1" data-testid="back-link">
+      Go back
+    </Link>
+  </div>
+)
diff --git a/packages/react/test-app/package.json b/packages/react/test-app/package.json
@@ -2,6 +2,7 @@
   "type": "module",
   "scripts": {
     "build": "vite build .",
+    "build:ssr": "vite build --ssr ssr.tsx --outDir dist",
     "dev": "nodemon --watch . --watch ../../core/dist --watch ../../react/dist --ext js,tsx,html,json --ignore dist/ --exec 'vite build .'",
     "lint": "eslint .",
     "type-check": "tsc --noEmit"
diff --git a/packages/react/test-app/ssr.tsx b/packages/react/test-app/ssr.tsx
@@ -0,0 +1,15 @@
+import { createInertiaApp, type ResolvedComponent } from '@inertiajs/react'
+import createServer from '@inertiajs/react/server'
+import ReactDOMServer from 'react-dom/server'
+
+createServer((page) =>
+  createInertiaApp({
+    page,
+    render: ReactDOMServer.renderToString,
+    resolve: (name) => {
+      const pages = import.meta.glob<ResolvedComponent>('./Pages/SSR/**/*.tsx', { eager: true })
+      return pages[`./Pages/${name}.tsx`]
+    },
+    setup: ({ App, props }) => <App {...props} />,
+  }),
+)
diff --git a/packages/react/test-app/vite.config.ts b/packages/react/test-app/vite.config.ts
@@ -1,9 +1,12 @@
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
 
+const isSSR = process.argv.includes('--ssr')
+
 export default defineConfig({
   build: {
     minify: false,
+    emptyOutDir: !isSSR,
   },
   resolve: {
     alias: {
diff --git a/packages/svelte/test-app/Pages/SSR/Page1.svelte b/packages/svelte/test-app/Pages/SSR/Page1.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { inertia } from '@inertiajs/svelte'
+
+  export let user: { name: string; email: string }
+  export let items: string[]
+  export let count: number
+</script>
+
+<div>
+  <h1 data-testid="ssr-title">SSR Page 1</h1>
+
+  <div data-testid="user-info">
+    <p data-testid="user-name">Name: {user.name}</p>
+    <p data-testid="user-email">Email: {user.email}</p>
+  </div>
+
+  <ul data-testid="items-list">
+    {#each items as item (item)}
+      <li data-testid="item">{item}</li>
+    {/each}
+  </ul>
+
+  <p data-testid="count">Count: {count}</p>
+
+  <a href="/ssr/page2" use:inertia data-testid="navigate-link">Navigate to another page</a>
+</div>
diff --git a/packages/svelte/test-app/Pages/SSR/Page2.svelte b/packages/svelte/test-app/Pages/SSR/Page2.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { inertia } from '@inertiajs/svelte'
+
+  export let navigatedTo: boolean
+</script>
+
+<div>
+  <h1 data-testid="ssr-title">SSR Page 2</h1>
+  <p data-testid="navigated-status">Navigated: {navigatedTo}</p>
+
+  <a href="/ssr/page1" use:inertia data-testid="back-link">Go back</a>
+</div>
diff --git a/packages/svelte/test-app/app.ts b/packages/svelte/test-app/app.ts
@@ -19,7 +19,8 @@ createInertiaApp({
     return pages[`./Pages/${name}.svelte`]
   },
   setup({ el, App, props }) {
-    new App({ target: el!, props })
+    const hydrate = el?.hasAttribute('data-server-rendered')
+    new App({ target: el!, props, hydrate })
   },
   ...(withAppDefaults && {
     defaults: {
diff --git a/packages/svelte/test-app/package.json b/packages/svelte/test-app/package.json
@@ -2,6 +2,7 @@
   "type": "module",
   "scripts": {
     "build": "vite build .",
+    "build:ssr": "vite build --ssr ssr.ts --outDir dist",
     "dev": "nodemon --watch . --watch ../../core/dist --watch ../../svelte/dist --ext js,ts,svelte,html,json --ignore dist/ --exec 'vite build .'",
     "lint": "eslint .",
     "type-check": "svelte-check --tsconfig ./tsconfig.json"
diff --git a/packages/svelte/test-app/ssr.ts b/packages/svelte/test-app/ssr.ts
@@ -0,0 +1,16 @@
+import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'
+import createServer from '@inertiajs/svelte/server'
+
+createServer((page) =>
+  createInertiaApp({
+    page,
+    resolve: (name) => {
+      const pages = import.meta.glob<ResolvedComponent>('./Pages/SSR/**/*.svelte', { eager: true })
+      return pages[`./Pages/${name}.svelte`]
+    },
+    setup({ App, props }) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return (App as any).render(props)
+    },
+  }),
+)
diff --git a/packages/svelte/test-app/vite.config.js b/packages/svelte/test-app/vite.config.js
@@ -1,14 +1,23 @@
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import { defineConfig } from 'vite'
 
+const isSSR = process.argv.includes('--ssr')
+
 export default defineConfig({
   build: {
     sourcemap: 'inline',
+    emptyOutDir: !isSSR,
   },
   resolve: {
     alias: {
       '@': __dirname,
     },
   },
-  plugins: [svelte()],
+  plugins: [
+    svelte({
+      compilerOptions: {
+        hydratable: true,
+      },
+    }),
+  ],
 })
diff --git a/packages/vue3/test-app/Pages/SSR/Page1.vue b/packages/vue3/test-app/Pages/SSR/Page1.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3'
+
+defineProps<{
+  user: {
+    name: string
+    email: string
+  }
+  items: string[]
+  count: number
+}>()
+</script>
+
+<template>
+  <div>
+    <h1 data-testid="ssr-title">SSR Page 1</h1>
+
+    <div data-testid="user-info">
+      <p data-testid="user-name">Name: {{ user.name }}</p>
+      <p data-testid="user-email">Email: {{ user.email }}</p>
+    </div>
+
+    <ul data-testid="items-list">
+      <li v-for="item in items" :key="item" data-testid="item">{{ item }}</li>
+    </ul>
+
+    <p data-testid="count">Count: {{ count }}</p>
+
+    <Link href="/ssr/page2" data-testid="navigate-link">Navigate to another page</Link>
+  </div>
+</template>
diff --git a/packages/vue3/test-app/Pages/SSR/Page2.vue b/packages/vue3/test-app/Pages/SSR/Page2.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3'
+
+defineProps<{
+  navigatedTo: boolean
+}>()
+</script>
+
+<template>
+  <div>
+    <h1 data-testid="ssr-title">SSR Page 2</h1>
+    <p data-testid="navigated-status">Navigated: {{ navigatedTo }}</p>
+
+    <Link href="/ssr/page1" data-testid="back-link">Go back</Link>
+  </div>
+</template>
diff --git a/packages/vue3/test-app/package.json b/packages/vue3/test-app/package.json
@@ -2,6 +2,7 @@
   "type": "module",
   "scripts": {
     "build": "vite build .",
+    "build:ssr": "vite build --ssr ssr.ts --outDir dist",
     "dev": "nodemon --watch . --watch ../../core/dist --watch ../../vue3/dist --ext js,vue,html,json --ignore dist/ --exec 'vite build .'",
     "lint": "eslint .",
     "type-check": "vue-tsc --noEmit"
diff --git a/packages/vue3/test-app/ssr.ts b/packages/vue3/test-app/ssr.ts
@@ -0,0 +1,20 @@
+import { createInertiaApp } from '@inertiajs/vue3'
+import createServer from '@inertiajs/vue3/server'
+import { createSSRApp, h, type DefineComponent } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+
+createServer((page) =>
+  createInertiaApp({
+    page,
+    render: renderToString,
+    resolve: (name) => {
+      const pages = import.meta.glob<DefineComponent>('./Pages/SSR/**/*.vue', { eager: true })
+      return pages[`./Pages/${name}.vue`]
+    },
+    setup({ App, props, plugin }) {
+      return createSSRApp({
+        render: () => h(App, props),
+      }).use(plugin)
+    },
+  }),
+)
diff --git a/packages/vue3/test-app/vite.config.ts b/packages/vue3/test-app/vite.config.ts
@@ -1,9 +1,12 @@
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 
+const isSSR = process.argv.includes('--ssr')
+
 export default defineConfig({
   build: {
     minify: false,
+    emptyOutDir: !isSSR,
   },
   resolve: {
     alias: {
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -7,13 +7,15 @@ declare const process: {
     BROWSER?: 'chromium' | 'webkit'
     CI?: boolean
     PACKAGE?: 'vue3' | 'react' | 'svelte'
+    SSR?: 'true'
   }
   platform: string
 }
 
 const adapter = process.env.PACKAGE || 'vue3'
 const runsInCI = !!process.env.CI
 const runsOnMac = process.platform === 'darwin'
+const ssrEnabled = process.env.SSR === 'true'
 
 const adapterPorts = { vue3: 13715, react: 13716, svelte: 13717 }
 const url = `http://localhost:${adapterPorts[adapter]}`
@@ -46,8 +48,35 @@ const projects = [
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
+// Build commands
+const buildCommand = `pnpm -r --filter './packages/${adapter}/test-app' build`
+const buildSSRCommand = `pnpm -r --filter './packages/${adapter}/test-app' build:ssr`
+const serveCommand = `cd tests/app && PACKAGE=${adapter} pnpm serve`
+
+// Web server configuration based on SSR mode
+const webServerConfig = ssrEnabled
+  ? [
+      {
+        command: `${buildCommand} && ${buildSSRCommand} && node packages/${adapter}/test-app/dist/ssr.js`,
+        url: 'http://localhost:13714/health',
+        reuseExistingServer: !runsInCI,
+      },
+      {
+        command: serveCommand,
+        url,
+        reuseExistingServer: !runsInCI,
+      },
+    ]
+  : {
+      command: `${buildCommand} && ${serveCommand}`,
+      url,
+      reuseExistingServer: !runsInCI,
+    }
+
 export default defineConfig({
   testDir: './tests',
+  /* Only run SSR tests when SSR=true, otherwise exclude them */
+  ...(ssrEnabled ? { testMatch: 'ssr.spec.ts' } : { testIgnore: 'ssr.spec.ts' }),
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -76,9 +105,5 @@ export default defineConfig({
   projects,
 
   /* Run your local dev server before starting the tests */
-  webServer: {
-    command: `pnpm -r --filter './packages/${adapter}/test-app' build && cd tests/app && PACKAGE=${adapter} pnpm serve`,
-    url,
-    reuseExistingServer: !runsInCI,
-  },
+  webServer: webServerConfig,
 })
diff --git a/tests/app/helpers.js b/tests/app/helpers.js
diff --git a/tests/app/server.js b/tests/app/server.js
diff --git a/tests/app/ssr.js b/tests/app/ssr.js
diff --git a/tests/ssr.spec.ts b/tests/ssr.spec.ts
