0
# Component Mounting
1
2
Core mounting functionality for creating testable Vue component instances with full control over props, slots, and environment configuration.
3
4
## Capabilities
5
6
### Mount Function
7
8
Creates a full Vue component instance with all lifecycle hooks executed and child components rendered.
9
10
```typescript { .api }
11
/**
12
* Mount a Vue component for testing with full rendering
13
* @param component - Vue component to mount
14
* @param options - Mounting configuration options
15
* @returns VueWrapper instance for testing interactions
16
*/
17
function mount<T>(
18
component: T,
19
options?: ComponentMountingOptions<T>
20
): VueWrapper<ComponentPublicInstance<T>>;
21
```
22
23
**Usage Examples:**
24
25
```typescript
26
import { mount } from "@vue/test-utils";
27
import MyComponent from "./MyComponent.vue";
28
29
// Basic mounting
30
const wrapper = mount(MyComponent);
31
32
// Mount with props
33
const wrapper = mount(MyComponent, {
34
props: {
35
title: "Test Title",
36
count: 42,
37
items: ["apple", "banana"]
38
}
39
});
40
41
// Mount with slots
42
const wrapper = mount(MyComponent, {
43
slots: {
44
default: "Default slot content",
45
header: "<h1>Header Content</h1>",
46
footer: { template: "<footer>Custom Footer</footer>" }
47
}
48
});
49
50
// Mount with global configuration
51
const wrapper = mount(MyComponent, {
52
global: {
53
plugins: [router, store],
54
provide: {
55
theme: "dark"
56
},
57
stubs: {
58
"router-link": true
59
}
60
}
61
});
62
```
63
64
### Shallow Mount Function
65
66
Creates a Vue component instance with child components automatically stubbed for isolated testing.
67
68
```typescript { .api }
69
/**
70
* Mount a Vue component with shallow rendering (child components stubbed)
71
* @param component - Vue component to mount
72
* @param options - Mounting configuration options
73
* @returns VueWrapper instance for testing interactions
74
*/
75
function shallowMount<T>(
76
component: T,
77
options?: ComponentMountingOptions<T>
78
): VueWrapper<ComponentPublicInstance<T>>;
79
```
80
81
**Usage Examples:**
82
83
```typescript
84
import { shallowMount } from "@vue/test-utils";
85
import ParentComponent from "./ParentComponent.vue";
86
87
// Shallow mount automatically stubs child components
88
const wrapper = shallowMount(ParentComponent, {
89
props: {
90
data: { id: 1, name: "Test" }
91
}
92
});
93
94
// Child components are rendered as stubs
95
expect(wrapper.html()).toContain('<child-component-stub');
96
```
97
98
### Server-Side Rendering
99
100
Renders a Vue component to an HTML string for server-side rendering testing.
101
102
```typescript { .api }
103
/**
104
* Render a Vue component to HTML string for SSR testing
105
* @param component - Vue component to render
106
* @param options - Rendering configuration (attachTo not supported)
107
* @returns Promise resolving to HTML string
108
*/
109
function renderToString<T>(
110
component: T,
111
options?: ComponentMountingOptions<T>
112
): Promise<string>;
113
```
114
115
**Usage Examples:**
116
117
```typescript
118
import { renderToString } from "@vue/test-utils";
119
import MyComponent from "./MyComponent.vue";
120
121
// Render component to HTML string
122
const html = await renderToString(MyComponent, {
123
props: {
124
message: "Hello SSR"
125
}
126
});
127
128
expect(html).toContain("Hello SSR");
129
```
130
131
## Component Mounting Options
132
133
Configuration interface for mounting components with type safety.
134
135
```typescript { .api }
136
interface ComponentMountingOptions<T> {
137
/** Component props with type checking based on component definition */
138
props?: ComponentProps<T>;
139
140
/** Component slots with type-safe slot definitions */
141
slots?: {
142
[K in keyof ComponentSlots<T>]:
143
| string
144
| VNode
145
| Component
146
| { template: string }
147
| ((props: any) => VNode);
148
};
149
150
/** Global configuration applied to the component */
151
global?: GlobalMountOptions;
152
153
/** Enable shallow rendering (stub child components) */
154
shallow?: boolean;
155
156
/** DOM element or selector to attach the component to */
157
attachTo?: Element | string;
158
159
/** HTML attributes to apply to the root element */
160
attrs?: Record<string, unknown>;
161
162
/** Component data function override */
163
data?(): Record<string, unknown>;
164
}
165
166
interface GlobalMountOptions {
167
/** Global components available to the mounted component */
168
components?: Record<string, Component>;
169
170
/** Vue app configuration overrides */
171
config?: Partial<AppConfig>;
172
173
/** Global directives available to the component */
174
directives?: Record<string, Directive>;
175
176
/** Global mixins applied to the component */
177
mixins?: ComponentOptions[];
178
179
/** Mock objects for global properties */
180
mocks?: Record<string, any>;
181
182
/** Vue plugins to install */
183
plugins?: Array<Plugin | [Plugin, ...any[]]>;
184
185
/** Values to provide via dependency injection */
186
provide?: Record<string | symbol, any>;
187
188
/** Component stubs configuration */
189
stubs?: Stubs;
190
191
/** Whether to render default slot content in stubs */
192
renderStubDefaultSlot?: boolean;
193
}
194
195
type Stubs = Record<string, Component | boolean | string> | string[];
196
```
197
198
## Error Handling
199
200
Mount functions may throw errors in the following scenarios:
201
202
- **Invalid Component**: When the component parameter is not a valid Vue component
203
- **Props Validation**: When provided props don't match component prop definitions (in development)
204
- **Attachment Error**: When `attachTo` references a non-existent DOM element
205
- **Plugin Error**: When global plugins fail to install properly
206
207
Common error handling patterns:
208
209
```typescript
210
import { mount } from "@vue/test-utils";
211
212
try {
213
const wrapper = mount(MyComponent, {
214
props: { requiredProp: "value" },
215
attachTo: document.body
216
});
217
} catch (error) {
218
console.error("Mount failed:", error.message);
219
}
220
```