test(nuxt): test remote islands for `NuxtIsland` (#23801)

test/fixtures/remote-provider/index.ts

@@ -0,0 +1,20 @@
+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/nuxt/nuxt-island.test.ts

@@ -1,6 +1,17 @@
 import { describe, expect, it, vi } from 'vitest'
 import { h } from 'vue'
+import { mountSuspended } from 'nuxt-vitest/utils'
 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) => {
+  return {
+    // @ts-expect-error virtual file
+    ...(await original()),
+    remoteComponentIslands: true
+  }
+})
 
 vi.mock('vue', async (original) => {
   const vue = await original<typeof import('vue')>()
@@ -37,5 +48,21 @@ describe('runtime server component', () => {
         "test": 1,
       }
     `)
+    vi.mocked(h).mockRestore()
+  })
+
+  it('expect remote island to be rendered', async () => {
+    const server = createSimpleRemoteIslandProvider()
+
+    const wrapper = await mountSuspended(NuxtIsland, {
+      props: {
+        name: 'Test',
+        source: 'http://localhost:3001'
+      }
+    })
+
+    expect(wrapper.html()).toMatchInlineSnapshot('"<div>hello world from another server</div>"')
+
+    await server.close()
   })
 })