test: add test suite for server rendering individual components

test/basic.test.ts

@@ -2,7 +2,9 @@ import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
 // import { isWindows } from 'std-env'
 import { setup, fetch, $fetch, startServer } from '@nuxt/test-utils'
+import { withQuery } from 'ufo'
 import { expectNoClientErrors } from './utils'
+import { ComponentRenderResult } from '#app'
 
 await setup({
   rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)),
@@ -318,6 +320,71 @@ describe('extends support', () => {
   })
 })
 
+describe('selective rendering of global components', () => {
+  it('renders components with route', async () => {
+    const result: ComponentRenderResult = await $fetch(withQuery('/__nuxt_render', {
+      url: '/foo',
+      state: JSON.stringify({}),
+      components: JSON.stringify([
+        { name: 'RouteComponent' }
+      ])
+    }))
+    expect(result.rendered[0].html).toMatchInlineSnapshot(`
+      "<pre>    Route: /foo
+        </pre>"
+    `)
+    expect(result.state).toMatchInlineSnapshot(`
+      {
+        "error": null,
+      }
+    `)
+    expect(Object.keys(result)).toMatchInlineSnapshot(`
+      [
+        "rendered",
+        "state",
+        "styles",
+        "scripts",
+      ]
+    `)
+  })
+  it('renders pure components', async () => {
+    const result: ComponentRenderResult = await $fetch(withQuery('/__nuxt_render', {
+      components: JSON.stringify([
+        {
+          name: 'PureComponent',
+          props: {
+            bool: false,
+            number: 3487,
+            str: 'something',
+            obj: { foo: 42, bar: false, me: 'hi' }
+          }
+        }
+      ])
+    }))
+    expect(result.rendered[0].html).toMatchInlineSnapshot(`
+      "<pre>    false
+          3487
+          &quot;something&quot;
+          {&quot;foo&quot;:42,&quot;bar&quot;:false,&quot;me&quot;:&quot;hi&quot;}
+          Was router enabled: false
+        </pre>"
+    `)
+    expect(result.state).toMatchInlineSnapshot(`
+      {
+        "error": null,
+      }
+    `)
+    expect(Object.keys(result)).toMatchInlineSnapshot(`
+      [
+        "rendered",
+        "state",
+        "styles",
+        "scripts",
+      ]
+    `)
+  })
+})
+
 describe('dynamic paths', () => {
   if (process.env.NUXT_TEST_DEV) {
     // TODO:

test/fixtures/basic/components/global/PureComponent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps({
+  bool: Boolean,
+  number: Number,
+  str: String,
+  obj: Object
+})
+let wasRouter = false
+try {
+  wasRouter = !!useRoute()
+} catch (e) {}
+</script>
+
+<template>
+  <pre>
+    {{ JSON.stringify(bool) }}
+    {{ JSON.stringify(number) }}
+    {{ JSON.stringify(str) }}
+    {{ JSON.stringify(obj) }}
+    Was router enabled: {{ wasRouter }}
+  </pre>
+</template>

test/fixtures/basic/components/global/RouteComponent.vue

@@ -0,0 +1,5 @@
+<template>
+  <pre>
+    Route: {{ $route.fullPath }}
+  </pre>
+</template>

test/fixtures/basic/nuxt.config.ts

@@ -2,6 +2,10 @@ import { defineNuxtConfig } from 'nuxt'
 import { addComponent } from '@nuxt/kit'
 
 export default defineNuxtConfig({
+  components: [
+    { path: '~/components/global', global: true },
+    '~/components'
+  ],
   buildDir: process.env.NITRO_BUILD_DIR,
   builder: process.env.TEST_WITH_WEBPACK ? 'webpack' : 'vite',
   extends: [

test/fixtures/basic/plugins/my-plugin.ts

@@ -2,7 +2,7 @@ export default defineNuxtPlugin(() => {
   useHead({
     titleTemplate: '%s - Fixture'
   })
-  const path = useRoute().path
+  const path = useRoute()?.path
   return {
     provide: {
       myPlugin: () => 'Injected by my-plugin',