diff --git a/test/fixtures/remote-provider/index.ts b/test/fixtures/remote-provider/index.ts
new file mode 100644
index 0000000000..d62201723c
--- /dev/null
+++ b/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: '
hello world from another server
',
+ state: {},
+ head: {
+ link: [],
+ style: []
+ }
+ }
+ res.statusCode = 200
+ res.setHeader('Content-Type', 'application/json')
+ res.end(JSON.stringify(response))
+ })
+
+ server.listen(port)
+
+ return server
+}
diff --git a/test/nuxt/nuxt-island.test.ts b/test/nuxt/nuxt-island.test.ts
index 898508a7c8..8d23fe2419 100644
--- a/test/nuxt/nuxt-island.test.ts
+++ b/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()
@@ -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('"hello world from another server
"')
+
+ await server.close()
})
})