test: use srvx and random port for remote provider (#31432)

package.json

@@ -105,6 +105,7 @@
     "eslint-plugin-perfectionist": "4.10.1",
     "eslint-typegen": "2.1.0",
     "estree-walker": "3.0.3",
+    "get-port-please": "3.1.2",
     "h3": "1.15.1",
     "happy-dom": "17.4.4",
     "installed-check": "9.3.0",
@@ -123,6 +124,7 @@
     "rollup": "4.36.0",
     "semver": "7.7.1",
     "sherif": "1.4.0",
+    "srvx": "0.2.5",
     "std-env": "3.8.1",
     "tinyexec": "0.3.2",
     "tinyglobby": "0.2.12",

pnpm-lock.yaml

@@ -137,6 +137,9 @@ importers:
       estree-walker:
         specifier: 3.0.3
         version: 3.0.3
+      get-port-please:
+        specifier: 3.1.2
+        version: 3.1.2
       h3:
         specifier: 1.15.1
         version: 1.15.1
@@ -191,6 +194,9 @@ importers:
       sherif:
         specifier: 1.4.0
         version: 1.4.0
+      srvx:
+        specifier: 0.2.5
+        version: 0.2.5
       std-env:
         specifier: 3.8.1
         version: 3.8.1
@@ -1193,8 +1199,6 @@ importers:
         specifier: workspace:*
         version: link:../../../packages/nuxt
 
-  test/fixtures/remote-provider: {}
-
   test/fixtures/runtime-compiler:
     dependencies:
       nuxt:
@@ -6875,6 +6879,9 @@ packages:
     resolution: {integrity: sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==}
     engines: {node: '>=12'}
 
+  srvx@0.2.5:
+    resolution: {integrity: sha512-G63uf9Emf8PQPlWkBKFfcqTkVjwIF5Z8lfECidSiaAXrd19Pj6ijU676yRfYP3KShZY7KmLsfb4/unIOCtnWfA==}
+
   stable-hash@0.0.4:
     resolution: {integrity: sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==}
 
@@ -14477,6 +14484,10 @@ snapshots:
 
   split-on-first@3.0.0: {}
 
+  srvx@0.2.5:
+    dependencies:
+      cookie-es: 2.0.0
+
   stable-hash@0.0.4: {}
 
   stackback@0.0.2: {}

test/fixtures/remote-provider/index.ts

@@ -1,21 +0,0 @@
-import http from 'node:http'
-
-export function createSimpleRemoteIslandProvider (port = 3001) {
-  const server = http.createServer((req, res) => {
-    const response = {
-      html: '<div>hello world from another server</div>',
-      state: {},
-      head: {
-        link: [],
-        style: [],
-      },
-    }
-    res.statusCode = 200
-    res.setHeader('Content-Type', 'application/json')
-    res.end(JSON.stringify(response))
-  })
-
-  server.listen(port)
-
-  return server
-}

test/fixtures/remote-provider/package.json

@@ -1,5 +0,0 @@
-{
-  "name": "remote-provider",
-  "version": "0.0.0",
-  "private": true
-}

test/nuxt/nuxt-island.test.ts

@@ -1,9 +1,10 @@
-import { beforeEach } from 'node:test'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { describe, expect, it, vi } from 'vitest'
 import { defineComponent, h, nextTick, popScopeId, pushScopeId } from 'vue'
+import { serve } from 'srvx'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { getPort } from 'get-port-please'
+
 import { createServerComponent } from '../../packages/nuxt/src/components/runtime/server-component'
-import { createSimpleRemoteIslandProvider } from '../fixtures/remote-provider'
 import NuxtIsland from '../../packages/nuxt/src/app/components/nuxt-island'
 
 vi.mock('#build/nuxt.config.mjs', async (original) => {
@@ -31,12 +32,12 @@ function expectNoConsoleIssue () {
   expect(consoleWarn).not.toHaveBeenCalled()
 }
 
-beforeEach(() => {
-  consoleError.mockClear()
-  consoleWarn.mockClear()
-})
-
 describe('runtime server component', () => {
+  beforeEach(() => {
+    consoleError.mockClear()
+    consoleWarn.mockClear()
+  })
+
   it('expect no data-v- attributes #23051', () => {
     // @ts-expect-error mock
     vi.mocked(h).mockImplementation(() => null)
@@ -67,12 +68,24 @@ describe('runtime server component', () => {
   })
 
   it('expect remote island to be rendered', async () => {
-    const server = createSimpleRemoteIslandProvider()
+    const port = await getPort({ host: 'localhost', public: false, random: true })
+    const server = serve({
+      port,
+      fetch () {
+        return new Response(JSON.stringify({
+          html: '<div>hello world from another server</div>',
+          state: {},
+          head: { link: [], style: [] },
+        }), { headers: { 'Content-Type': 'application/json' } })
+      },
+    })
+
+    await server.ready()
 
     const wrapper = await mountSuspended(NuxtIsland, {
       props: {
         name: 'Test',
-        source: 'http://localhost:3001',
+        source: `http://localhost:${port}`,
       },
     })