Skip to content

Commit 52bb603

Browse files
freakzlikecexbrayat
authored andcommitted
fix(renderToString): Remove attachTo from options and print warning on usage
1 parent 0a3b619 commit 52bb603

File tree

5 files changed

+74
-19
lines changed

5 files changed

+74
-19
lines changed

docs/api/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ If you find yourself having to set common App configuration for many of your tes
6767

6868
### attachTo
6969

70-
Specify the node to mount the component on.
70+
Specify the node to mount the component on. This is not available when using `renderToString`.
7171

7272
**Signature:**
7373

src/renderToString.ts

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
Prop
1919
} from 'vue'
2020

21-
import { MountingOptions } from './types'
21+
import { RenderMountingOptions } from './types'
2222
import { createInstance } from './createInstance'
2323

2424
// NOTE this should come from `vue`
@@ -31,7 +31,7 @@ type ComponentMountingOptions<T> = T extends DefineComponent<
3131
any,
3232
any
3333
>
34-
? MountingOptions<
34+
? RenderMountingOptions<
3535
Partial<ExtractDefaultPropTypes<PropsOrPropOptions>> &
3636
Omit<
3737
Readonly<ExtractPropTypes<PropsOrPropOptions>> & PublicProps,
@@ -40,15 +40,15 @@ type ComponentMountingOptions<T> = T extends DefineComponent<
4040
D
4141
> &
4242
Record<string, any>
43-
: MountingOptions<any>
43+
: RenderMountingOptions<any>
4444

4545
// Class component (without vue-class-component) - no props
4646
export function renderToString<V extends {}>(
4747
originalComponent: {
4848
new (...args: any[]): V
4949
__vccOpts: any
5050
},
51-
options?: MountingOptions<any> & Record<string, any>
51+
options?: RenderMountingOptions<any> & Record<string, any>
5252
): Promise<string>
5353

5454
// Class component (without vue-class-component) - props
@@ -58,7 +58,7 @@ export function renderToString<V extends {}, P>(
5858
__vccOpts: any
5959
defaultProps?: Record<string, Prop<any>> | string[]
6060
},
61-
options?: MountingOptions<P & PublicProps> & Record<string, any>
61+
options?: RenderMountingOptions<P & PublicProps> & Record<string, any>
6262
): Promise<string>
6363

6464
// Class component - no props
@@ -67,7 +67,7 @@ export function renderToString<V extends {}>(
6767
new (...args: any[]): V
6868
registerHooks(keys: string[]): void
6969
},
70-
options?: MountingOptions<any> & Record<string, any>
70+
options?: RenderMountingOptions<any> & Record<string, any>
7171
): Promise<string>
7272

7373
// Class component - props
@@ -77,13 +77,13 @@ export function renderToString<V extends {}, P>(
7777
props(Props: P): any
7878
registerHooks(keys: string[]): void
7979
},
80-
options?: MountingOptions<P & PublicProps> & Record<string, any>
80+
options?: RenderMountingOptions<P & PublicProps> & Record<string, any>
8181
): Promise<string>
8282

8383
// Functional component with emits
8484
export function renderToString<Props extends {}, E extends EmitsOptions = {}>(
8585
originalComponent: FunctionalComponent<Props, E>,
86-
options?: MountingOptions<Props & PublicProps> & Record<string, any>
86+
options?: RenderMountingOptions<Props & PublicProps> & Record<string, any>
8787
): Promise<string>
8888

8989
// Component declared with defineComponent
@@ -115,7 +115,7 @@ export function renderToString<
115115
Props,
116116
Defaults
117117
>,
118-
options?: MountingOptions<
118+
options?: RenderMountingOptions<
119119
Partial<Defaults> & Omit<Props & PublicProps, keyof Defaults>,
120120
D
121121
> &
@@ -150,7 +150,7 @@ export function renderToString<
150150
Extends,
151151
EE
152152
>,
153-
options?: MountingOptions<Props & PublicProps, D>
153+
options?: RenderMountingOptions<Props & PublicProps, D>
154154
): Promise<string>
155155

156156
// Component declared with { props: [] }
@@ -180,7 +180,7 @@ export function renderToString<
180180
EE,
181181
Props
182182
>,
183-
options?: MountingOptions<Props & PublicProps, D>
183+
options?: RenderMountingOptions<Props & PublicProps, D>
184184
): Promise<string>
185185

186186
// Component declared with { props: { ... } }
@@ -208,10 +208,17 @@ export function renderToString<
208208
Extends,
209209
EE
210210
>,
211-
options?: MountingOptions<ExtractPropTypes<PropsOptions> & PublicProps, D>
211+
options?: RenderMountingOptions<
212+
ExtractPropTypes<PropsOptions> & PublicProps,
213+
D
214+
>
212215
): Promise<string>
213216

214217
export function renderToString(component: any, options?: any): Promise<string> {
218+
if (options?.attachTo) {
219+
console.warn('attachTo option is not available for renderToString')
220+
}
221+
215222
const { app } = createInstance(component, options)
216223
return baseRenderToString(app)
217224
}

src/types.ts

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ type RawProps = VNodeProps & {
4141
[Symbol.iterator]?: never
4242
} & Record<string, any>
4343

44-
export interface MountingOptions<Props, Data = {}> {
44+
interface BaseMountingOptions<Props, Data = {}> {
4545
/**
4646
* Overrides component's default data. Must be a function.
4747
* @see https://test-utils.vuejs.org/api/#data
@@ -72,18 +72,36 @@ export interface MountingOptions<Props, Data = {}> {
7272
* Provides global mounting options to the component.
7373
*/
7474
global?: GlobalMountOptions
75+
/**
76+
* Automatically stub out all the child components.
77+
* @default false
78+
* @see https://test-utils.vuejs.org/api/#slots
79+
*/
80+
shallow?: boolean
81+
}
82+
83+
/**
84+
* Mounting options for `mount` and `shallowMount`
85+
*/
86+
export interface MountingOptions<Props, Data = {}>
87+
extends BaseMountingOptions<Props, Data> {
7588
/**
7689
* Specify where to mount the component.
7790
* Can be a valid CSS selector, or an Element connected to the document.
7891
* @see https://test-utils.vuejs.org/api/#attachto
7992
*/
8093
attachTo?: HTMLElement | string
94+
}
95+
96+
/**
97+
* Mounting options for `renderToString`
98+
*/
99+
export interface RenderMountingOptions<Props, Data = {}>
100+
extends BaseMountingOptions<Props, Data> {
81101
/**
82-
* Automatically stub out all the child components.
83-
* @default false
84-
* @see https://test-utils.vuejs.org/api/#slots
102+
* Attach to is not available in SSR mode
85103
*/
86-
shallow?: boolean
104+
attachTo?: never
87105
}
88106

89107
export type Stub = boolean | Component | Directive

test-dts/renderToString.d-test.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,3 +105,11 @@ class ClassComponent extends Vue {
105105
}
106106
}
107107
expectType<Promise<string>>(renderToString(ClassComponent))
108+
109+
// No `attachTo` mounting option
110+
expectError(
111+
renderToString(AppWithProps, {
112+
// @ts-expect-error should not have attachTo mounting option
113+
attachTo: 'body'
114+
})
115+
)

tests/renderToString.spec.ts

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @vitest-environment node
44
*/
55

6-
import { describe, it, expect } from 'vitest'
6+
import { describe, it, expect, vi } from 'vitest'
77
import { defineComponent, onMounted, onServerPrefetch, ref } from 'vue'
88
import { renderToString } from '../src'
99

@@ -61,4 +61,26 @@ describe('renderToString', () => {
6161

6262
expect(contents).toBe('<div>onServerPrefetch</div>')
6363
})
64+
65+
it('returns print warning if `attachTo` option is used', async () => {
66+
const spy = vi.spyOn(console, 'warn').mockReturnValue()
67+
68+
const Component = defineComponent({
69+
template: '<div>foo</div>'
70+
})
71+
72+
expect(
73+
// @ts-expect-error `attachTo` property is not allowed
74+
await renderToString(Component, {
75+
attachTo: 'body'
76+
})
77+
).toBe('<div>foo</div>')
78+
79+
expect(spy).toHaveBeenCalledTimes(1)
80+
expect(spy).toHaveBeenCalledWith(
81+
'attachTo option is not available for renderToString'
82+
)
83+
84+
spy.mockRestore()
85+
})
6486
})

0 commit comments

Comments
 (0)