fix(renderToString): Remove attachTo from options and print warning o…

…n usage

docs/api/index.md

@@ -67,7 +67,7 @@ If you find yourself having to set common App configuration for many of your tes
 
 ### attachTo
 
-Specify the node to mount the component on.
+Specify the node to mount the component on. This is not available when using `renderToString`.
 
 **Signature:**
 

src/renderToString.ts

@@ -18,7 +18,7 @@ import {
   Prop
 } from 'vue'
 
-import { MountingOptions } from './types'
+import { RenderMountingOptions } from './types'
 import { createInstance } from './createInstance'
 
 // NOTE this should come from `vue`
@@ -31,7 +31,7 @@ type ComponentMountingOptions<T> = T extends DefineComponent<
   any,
   any
 >
-  ? MountingOptions<
+  ? RenderMountingOptions<
       Partial<ExtractDefaultPropTypes<PropsOrPropOptions>> &
         Omit<
           Readonly<ExtractPropTypes<PropsOrPropOptions>> & PublicProps,
@@ -40,15 +40,15 @@ type ComponentMountingOptions<T> = T extends DefineComponent<
       D
     > &
       Record<string, any>
-  : MountingOptions<any>
+  : RenderMountingOptions<any>
 
 // Class component (without vue-class-component) - no props
 export function renderToString<V extends {}>(
   originalComponent: {
     new (...args: any[]): V
     __vccOpts: any
   },
-  options?: MountingOptions<any> & Record<string, any>
+  options?: RenderMountingOptions<any> & Record<string, any>
 ): Promise<string>
 
 // Class component (without vue-class-component) - props
@@ -58,7 +58,7 @@ export function renderToString<V extends {}, P>(
     __vccOpts: any
     defaultProps?: Record<string, Prop<any>> | string[]
   },
-  options?: MountingOptions<P & PublicProps> & Record<string, any>
+  options?: RenderMountingOptions<P & PublicProps> & Record<string, any>
 ): Promise<string>
 
 // Class component - no props
@@ -67,7 +67,7 @@ export function renderToString<V extends {}>(
     new (...args: any[]): V
     registerHooks(keys: string[]): void
   },
-  options?: MountingOptions<any> & Record<string, any>
+  options?: RenderMountingOptions<any> & Record<string, any>
 ): Promise<string>
 
 // Class component - props
@@ -77,13 +77,13 @@ export function renderToString<V extends {}, P>(
     props(Props: P): any
     registerHooks(keys: string[]): void
   },
-  options?: MountingOptions<P & PublicProps> & Record<string, any>
+  options?: RenderMountingOptions<P & PublicProps> & Record<string, any>
 ): Promise<string>
 
 // Functional component with emits
 export function renderToString<Props extends {}, E extends EmitsOptions = {}>(
   originalComponent: FunctionalComponent<Props, E>,
-  options?: MountingOptions<Props & PublicProps> & Record<string, any>
+  options?: RenderMountingOptions<Props & PublicProps> & Record<string, any>
 ): Promise<string>
 
 // Component declared with defineComponent
@@ -115,7 +115,7 @@ export function renderToString<
     Props,
     Defaults
   >,
-  options?: MountingOptions<
+  options?: RenderMountingOptions<
     Partial<Defaults> & Omit<Props & PublicProps, keyof Defaults>,
     D
   > &
@@ -150,7 +150,7 @@ export function renderToString<
     Extends,
     EE
   >,
-  options?: MountingOptions<Props & PublicProps, D>
+  options?: RenderMountingOptions<Props & PublicProps, D>
 ): Promise<string>
 
 // Component declared with { props: [] }
@@ -180,7 +180,7 @@ export function renderToString<
     EE,
     Props
   >,
-  options?: MountingOptions<Props & PublicProps, D>
+  options?: RenderMountingOptions<Props & PublicProps, D>
 ): Promise<string>
 
 // Component declared with { props: { ... } }
@@ -208,10 +208,17 @@ export function renderToString<
     Extends,
     EE
   >,
-  options?: MountingOptions<ExtractPropTypes<PropsOptions> & PublicProps, D>
+  options?: RenderMountingOptions<
+    ExtractPropTypes<PropsOptions> & PublicProps,
+    D
+  >
 ): Promise<string>
 
 export function renderToString(component: any, options?: any): Promise<string> {
+  if (options?.attachTo) {
+    console.warn('attachTo option is not available for renderToString')
+  }
+
   const { app } = createInstance(component, options)
   return baseRenderToString(app)
 }

src/types.ts

@@ -41,7 +41,7 @@ type RawProps = VNodeProps & {
   [Symbol.iterator]?: never
 } & Record<string, any>
 
-export interface MountingOptions<Props, Data = {}> {
+interface BaseMountingOptions<Props, Data = {}> {
   /**
    * Overrides component's default data. Must be a function.
    * @see https://test-utils.vuejs.org/api/#data
@@ -72,18 +72,36 @@ export interface MountingOptions<Props, Data = {}> {
    * Provides global mounting options to the component.
    */
   global?: GlobalMountOptions
+  /**
+   * Automatically stub out all the child components.
+   * @default false
+   * @see https://test-utils.vuejs.org/api/#slots
+   */
+  shallow?: boolean
+}
+
+/**
+ * Mounting options for `mount` and `shallowMount`
+ */
+export interface MountingOptions<Props, Data = {}>
+  extends BaseMountingOptions<Props, Data> {
   /**
    * Specify where to mount the component.
    * Can be a valid CSS selector, or an Element connected to the document.
    * @see https://test-utils.vuejs.org/api/#attachto
    */
   attachTo?: HTMLElement | string
+}
+
+/**
+ * Mounting options for `renderToString`
+ */
+export interface RenderMountingOptions<Props, Data = {}>
+  extends BaseMountingOptions<Props, Data> {
   /**
-   * Automatically stub out all the child components.
-   * @default false
-   * @see https://test-utils.vuejs.org/api/#slots
+   * Attach to is not available in SSR mode
    */
-  shallow?: boolean
+  attachTo?: never
 }
 
 export type Stub = boolean | Component | Directive

test-dts/renderToString.d-test.ts

@@ -105,3 +105,11 @@ class ClassComponent extends Vue {
   }
 }
 expectType<Promise<string>>(renderToString(ClassComponent))
+
+// No `attachTo` mounting option
+expectError(
+  renderToString(AppWithProps, {
+    // @ts-expect-error should not have attachTo mounting option
+    attachTo: 'body'
+  })
+)

tests/renderToString.spec.ts

@@ -3,7 +3,7 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { defineComponent, onMounted, onServerPrefetch, ref } from 'vue'
 import { renderToString } from '../src'
 
@@ -61,4 +61,26 @@ describe('renderToString', () => {
 
     expect(contents).toBe('<div>onServerPrefetch</div>')
   })
+
+  it('returns print warning if `attachTo` option is used', async () => {
+    const spy = vi.spyOn(console, 'warn').mockReturnValue()
+
+    const Component = defineComponent({
+      template: '<div>foo</div>'
+    })
+
+    expect(
+      // @ts-expect-error `attachTo` property is not allowed
+      await renderToString(Component, {
+        attachTo: 'body'
+      })
+    ).toBe('<div>foo</div>')
+
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy).toHaveBeenCalledWith(
+      'attachTo option is not available for renderToString'
+    )
+
+    spy.mockRestore()
+  })
 })