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() }) })