test: fix server hmr port conflict (#8197)

Author: sapphi-red

playground/ssr-vue/__tests__/serve.ts

@@ -3,7 +3,7 @@
 
 import path from 'path'
 import kill from 'kill-port'
-import { isBuild, ports, rootDir } from '~utils'
+import { hmrPorts, isBuild, ports, rootDir } from '~utils'
 
 export const port = ports['ssr-vue']
 
@@ -37,7 +37,11 @@ export async function serve() {
   await kill(port)
 
   const { createServer } = require(path.resolve(rootDir, 'server.js'))
-  const { app, vite } = await createServer(rootDir, isBuild)
+  const { app, vite } = await createServer(
+    rootDir,
+    isBuild,
+    hmrPorts['ssr-vue']
+  )
 
   return new Promise((resolve, reject) => {
     try {

playground/ssr-vue/server.js

@@ -7,7 +7,8 @@ const isTest = process.env.NODE_ENV === 'test' || !!process.env.VITE_TEST_BUILD
 
 async function createServer(
   root = process.cwd(),
-  isProd = process.env.NODE_ENV === 'production'
+  isProd = process.env.NODE_ENV === 'production',
+  hmrPort
 ) {
   const resolve = (p) => path.resolve(__dirname, p)
 
@@ -37,6 +38,9 @@ async function createServer(
           // misses change events, so enforce polling for consistency
           usePolling: true,
           interval: 100
+        },
+        hmr: {
+          port: hmrPort
         }
       }
     })

playground/test-utils.ts

@@ -34,6 +34,14 @@ export const ports = {
   'css/postcss-caching': 5005,
   'css/postcss-plugins-different-dir': 5006
 }
+export const hmrPorts = {
+  'optimize-missing-deps': 24680,
+  'ssr-deps': 24681,
+  'ssr-html': 24682,
+  'ssr-pug': 24683,
+  'ssr-react': 24684,
+  'ssr-vue': 24685
+}
 
 const hexToNameMap: Record<string, string> = {}
 Object.keys(colors).forEach((color) => {