test: run ssr-conditions build test (#18695)

playground/ssr-conditions/__tests__/serve.ts

@@ -3,15 +3,42 @@
 
 import path from 'node:path'
 import kill from 'kill-port'
-import { hmrPorts, ports, rootDir } from '~utils'
+import { hmrPorts, isBuild, ports, rootDir } from '~utils'
 
 export const port = ports['ssr-conditions']
 
 export async function serve(): Promise<{ close(): Promise<void> }> {
+  if (isBuild) {
+    // build first
+    const { build } = await import('vite')
+    // client build
+    await build({
+      root: rootDir,
+      logLevel: 'silent', // exceptions are logged by Vitest
+      build: {
+        minify: false,
+        outDir: 'dist/client',
+      },
+    })
+    // server build
+    await build({
+      root: rootDir,
+      logLevel: 'silent',
+      build: {
+        ssr: 'src/app.js',
+        outDir: 'dist/server',
+      },
+    })
+  }
+
   await kill(port)
 
   const { createServer } = await import(path.resolve(rootDir, 'server.js'))
-  const { app, vite } = await createServer(rootDir, hmrPorts['ssr-conditions'])
+  const { app, vite } = await createServer(
+    rootDir,
+    isBuild,
+    hmrPorts['ssr-conditions'],
+  )
 
   return new Promise((resolve, reject) => {
     try {

playground/ssr-conditions/__tests__/ssr-conditions.spec.ts

@@ -11,24 +11,25 @@ test('ssr.resolve.conditions affect non-externalized imports during ssr', async
   )
 })
 
-test('ssr.resolve.externalConditions affect externalized imports during ssr', async () => {
+// externalConditions is only used for dev
-  await page.goto(url)
-  expect(await page.textContent('.external-react-server')).toMatch('edge.js')
-})
-
 test.runIf(isServe)(
-  'ssr.resolve settings do not affect non-ssr imports',
+  'ssr.resolve.externalConditions affect externalized imports during ssr',
   async () => {
     await page.goto(url)
-    await withRetry(async () => {
+    expect(await page.textContent('.external-react-server')).toMatch('edge.js')
-      expect(
-        await page.textContent('.browser-no-external-react-server'),
-      ).toMatch('default.js')
-    })
-    await withRetry(async () => {
-      expect(await page.textContent('.browser-external-react-server')).toMatch(
-        'default.js',
-      )
-    })
   },
 )
+
+test('ssr.resolve settings do not affect non-ssr imports', async () => {
+  await page.goto(url)
+  await withRetry(async () => {
+    expect(await page.textContent('.browser-no-external-react-server')).toMatch(
+      'default.js',
+    )
+  })
+  await withRetry(async () => {
+    expect(await page.textContent('.browser-external-react-server')).toMatch(
+      'default.js',
+    )
+  })
+})

playground/ssr-conditions/package.json

@@ -5,6 +5,9 @@
   "type": "module",
   "scripts": {
     "dev": "node server",
+    "build": "npm run build:client && npm run build:server",
+    "build:client": "vite build --outDir dist/client",
+    "build:server": "vite build --ssr src/app.js --outDir dist/server",
     "serve": "NODE_ENV=production node server",
     "debug": "node --inspect-brk server"
   },
@@ -13,6 +16,7 @@
     "@vitejs/test-ssr-conditions-no-external": "file:./no-external"
   },
   "devDependencies": {
-    "express": "^5.0.1"
+    "express": "^5.0.1",
+    "sirv": "^3.0.0"
   }
 }

playground/ssr-conditions/server.js

@@ -2,49 +2,67 @@ import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import express from 'express'
+import sirv from 'sirv'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const isTest = process.env.VITEST
 
-export async function createServer(root = process.cwd(), hmrPort) {
+export async function createServer(
+  root = process.cwd(),
+  isProd = process.env.NODE_ENV === 'production',
+  hmrPort,
+) {
   const resolve = (p) => path.resolve(__dirname, p)
 
+  const indexProd = isProd
+    ? fs.readFileSync(resolve('dist/client/index.html'), 'utf-8')
+    : ''
+
   const app = express()
 
   /**
    * @type {import('vite').ViteDevServer}
    */
-  const vite = await (
+  let vite
-    await import('vite')
+  if (!isProd) {
-  ).createServer({
+    vite = await (
-    root,
+      await import('vite')
-    logLevel: isTest ? 'error' : 'info',
+    ).createServer({
-    server: {
+      root,
-      middlewareMode: true,
+      logLevel: isTest ? 'error' : 'info',
-      watch: {
+      server: {
-        // During tests we edit the files too fast and sometimes chokidar
+        middlewareMode: true,
-        // misses change events, so enforce polling for consistency
+        watch: {
-        usePolling: true,
+          // During tests we edit the files too fast and sometimes chokidar
-        interval: 100,
+          // misses change events, so enforce polling for consistency
+          usePolling: true,
+          interval: 100,
+        },
+        hmr: {
+          port: hmrPort,
+        },
       },
-      hmr: {
+      appType: 'custom',
-        port: hmrPort,
+    })
-      },
+    app.use(vite.middlewares)
-    },
+  } else {
-    appType: 'custom',
+    app.use(sirv(resolve('dist/client'), { extensions: [] }))
-  })
+  }
-
-  app.use(vite.middlewares)
 
   app.use('*all', async (req, res) => {
     try {
       const url = req.originalUrl
 
-      let template
+      let template, render
-      template = fs.readFileSync(resolve('index.html'), 'utf-8')
+      if (!isProd) {
-      template = await vite.transformIndexHtml(url, template)
+        template = fs.readFileSync(resolve('index.html'), 'utf-8')
-      const render = (await vite.ssrLoadModule('/src/app.js')).render
+        template = await vite.transformIndexHtml(url, template)
+        render = (await vite.ssrLoadModule('/src/app.js')).render
+      } else {
+        template = indexProd
+        render = (await import('./dist/server/app.js')).render
+      }
 
       const appHtml = await render(url, __dirname)
 

pnpm-lock.yaml

@@ -1347,6 +1347,9 @@ importers:
       express:
         specifier: ^5.0.1
         version: 5.0.1
+      sirv:
+        specifier: ^3.0.0
+        version: 3.0.0(patch_hash=plxlsciwiebyhal5sm4vtpekka)
 
   playground/ssr-conditions/external: {}