-
Notifications
You must be signed in to change notification settings - Fork 20
/
Copy pathindex.html
661 lines (577 loc) · 128 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>API Reference | Vue Test Utils (2.0.0-beta.0)</title>
<meta name="description" content="">
<meta name="generator" content="VuePress 1.3.1">
<link rel="preload" href="/vue-test-utils-next-docs/assets/css/0.styles.d0eb5c60.css" as="style"><link rel="preload" href="/vue-test-utils-next-docs/assets/js/app.18d340b2.js" as="script"><link rel="preload" href="/vue-test-utils-next-docs/assets/js/2.5735719d.js" as="script"><link rel="preload" href="/vue-test-utils-next-docs/assets/js/6.143c886c.js" as="script"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/10.2d2a2aa5.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/11.cb716554.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/12.e0370ad0.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/13.11e1da81.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/14.4b1b87e0.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/15.289c2a9d.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/16.509615aa.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/17.5494a0d1.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/18.10a95503.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/19.b94e0302.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/20.73310ab0.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/21.22c4e6fc.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/22.362cd32f.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/23.ce1e7b6d.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/24.5cba3016.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/25.4de98a73.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/26.746ae6d9.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/27.377b86ce.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/3.ff4c1afb.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/4.c4dd5428.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/5.caed462d.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/7.422b07a5.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/8.20d53128.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/9.f1d3ef34.js">
<link rel="stylesheet" href="/vue-test-utils-next-docs/assets/css/0.styles.d0eb5c60.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-test-utils-next-docs/" class="home-link router-link-active"><!----> <span class="site-name">Vue Test Utils (2.0.0-beta.0)</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-test-utils-next-docs/guide/introduction.html" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/vue-test-utils-next-docs/api/" class="nav-link router-link-exact-active router-link-active">
API Reference
</a></div><div class="nav-item"><a href="/vue-test-utils-next-docs/guide/migration.html" class="nav-link">
Migration from VTU 1
</a></div><div class="nav-item"><a href="https://github.com/vuejs/vue-test-utils-next" target="_blank" rel="noopener noreferrer" class="nav-link external">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-test-utils-next-docs/guide/introduction.html" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/vue-test-utils-next-docs/api/" class="nav-link router-link-exact-active router-link-active">
API Reference
</a></div><div class="nav-item"><a href="/vue-test-utils-next-docs/guide/migration.html" class="nav-link">
Migration from VTU 1
</a></div><div class="nav-item"><a href="https://github.com/vuejs/vue-test-utils-next" target="_blank" rel="noopener noreferrer" class="nav-link external">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>API Reference</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue-test-utils-next-docs/api/" class="active sidebar-link">API Reference</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#mount" class="sidebar-link">mount()</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#mount-options" class="sidebar-link">mount() options</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#attachto" class="sidebar-link">attachTo</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#data" class="sidebar-link">data</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#props" class="sidebar-link">props</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#slots" class="sidebar-link">slots</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#global-components" class="sidebar-link">global.components</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#global-directives" class="sidebar-link">global.directives</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#global-mixins" class="sidebar-link">global.mixins</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#global-mocks" class="sidebar-link">global.mocks</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#global-plugins" class="sidebar-link">global.plugins</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#global-provide" class="sidebar-link">global.provide</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#global-stubs" class="sidebar-link">global.stubs</a></li></ul></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#wrapper-methods" class="sidebar-link">Wrapper methods</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#attributes" class="sidebar-link">attributes</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#classes" class="sidebar-link">classes</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#emitted" class="sidebar-link">emitted</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#exists" class="sidebar-link">exists</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#find" class="sidebar-link">find</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#findall" class="sidebar-link">findAll</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#findcomponent" class="sidebar-link">findComponent</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#findallcomponents" class="sidebar-link">findAllComponents</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#getcomponent" class="sidebar-link">getComponent</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#html" class="sidebar-link">html</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#props-2" class="sidebar-link">props</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#setprops" class="sidebar-link">setProps</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#setvalue" class="sidebar-link">setValue</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#text" class="sidebar-link">text</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#trigger" class="sidebar-link">trigger</a></li><li class="sidebar-sub-header"><a href="/vue-test-utils-next-docs/api/#unmount" class="sidebar-link">unmount</a></li></ul></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="api-reference"><a href="#api-reference" class="header-anchor">#</a> API Reference</h1> <h2 id="mount"><a href="#mount" class="header-anchor">#</a> <code>mount()</code></h2> <p>Creates a Wrapper that contains the mounted and rendered Vue component to test.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> mount <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@vue/test-utils'</span>
<span class="token keyword">const</span> Hello <span class="token operator">=</span> <span class="token punctuation">{</span>
template<span class="token operator">:</span> <span class="token string">'<div>Hello world</div>'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'mounts a component'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Hello<span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toContain</span><span class="token punctuation">(</span><span class="token string">'Hello world'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="mount-options"><a href="#mount-options" class="header-anchor">#</a> <code>mount()</code> options</h2> <p><code>mount</code> accepts a second parameter where you can predefine the component's state.</p> <h3 id="attachto"><a href="#attachto" class="header-anchor">#</a> <code>attachTo</code></h3> <p>Specify where to mount the component. Useful when testing Vue as part of a larger application.</p> <p><code>Component.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Vue Component<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'mounts on a specific element'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">// in a JSDOM environment, such as Jest</span>
document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'html'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
<div>
<h1>Non Vue app</h1>
<div id="app"></div>
</div>
</span><span class="token template-punctuation string">`</span></span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
attachTo<span class="token operator">:</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span>
<span class="token comment">/*
* <div>
* <h1>Non Vue app</h1>
* <div>Vue Component</div>
* </div>
*/</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="data"><a href="#data" class="header-anchor">#</a> <code>data</code></h3> <p>Overrides a component's default <code>data</code>. Must be a function.</p> <p><code>Component.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Foo is {{ foo }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
foo<span class="token operator">:</span> <span class="token string">'foo'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'overrides data'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
foo<span class="token operator">:</span> <span class="token string">'bar'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toContain</span><span class="token punctuation">(</span><span class="token string">'Foo is bar'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="props"><a href="#props" class="header-anchor">#</a> <code>props</code></h3> <p>Used to set props on a component when mounted.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Count: {{ count }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
count<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> Number<span class="token punctuation">,</span>
required<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'props'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
count<span class="token operator">:</span> <span class="token number">5</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toContain</span><span class="token punctuation">(</span><span class="token string">'Count: 5'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="slots"><a href="#slots" class="header-anchor">#</a> <code>slots</code></h3> <p>Provide values for slots on a component. Slots can be a component imported from a <code>.vue</code> file or a render function. Currently providing an object with a <code>template</code> key is not supported. This may be supported in the future.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bar<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Bar <span class="token keyword">from</span> <span class="token string">'./Bar.vue'</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'renders slots content'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
slots<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'Default'</span><span class="token punctuation">,</span>
foo<span class="token operator">:</span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token string">'h1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'Named Slot'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
bar<span class="token operator">:</span> Bar
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//=> '<h1>Named Slot</h1>Default<div>Bar</div>'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="global-components"><a href="#global-components" class="header-anchor">#</a> <code>global.components</code></h3> <p>Registers components globally to all components</p> <p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> GlobalComponent <span class="token keyword">from</span> <span class="token string">'@/components/GlobalComponent'</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'installs a component globally'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> Component <span class="token operator">=</span> <span class="token punctuation">{</span>
template<span class="token operator">:</span> <span class="token string">'<div><global-component/></div>'</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
global<span class="token operator">:</span> <span class="token punctuation">{</span>
components<span class="token operator">:</span> <span class="token punctuation">{</span>
GlobalComponent
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'.global-component'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exists</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="global-directives"><a href="#global-directives" class="header-anchor">#</a> <code>global.directives</code></h3> <p>Registers a directive globally to all components</p> <p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Directive <span class="token keyword">from</span> <span class="token string">'@/directives/Directive'</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'installs a directive globally'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> Component <span class="token operator">=</span> <span class="token punctuation">{</span>
template<span class="token operator">:</span> <span class="token string">'<div v-bar>Foo</div>'</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
global<span class="token operator">:</span> <span class="token punctuation">{</span>
directives<span class="token operator">:</span> <span class="token punctuation">{</span>
Bar<span class="token operator">:</span> Directive
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">classes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toContain</span><span class="token punctuation">(</span><span class="token string">'added-by-bar'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="global-mixins"><a href="#global-mixins" class="header-anchor">#</a> <code>global.mixins</code></h3> <p>Applies mixins via <code>app.mixin(...)</code>.</p> <p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'adds a lifecycle mixin'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> mixin <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Component was created!'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> Component <span class="token operator">=</span> <span class="token punctuation">{</span> template<span class="token operator">:</span> <span class="token string">'<div></div>'</span> <span class="token punctuation">}</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
global<span class="token operator">:</span> <span class="token punctuation">{</span>
mixins<span class="token operator">:</span> <span class="token punctuation">[</span>mixin<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 'Component was created!' will be logged</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="global-mocks"><a href="#global-mocks" class="header-anchor">#</a> <code>global.mocks</code></h3> <p>Mocks a global instance property. Can be used for mocking out <code>this.$store</code>, <code>this.$router</code> etc.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>This is designed to mock variables injected by third party plugins, not Vue's native properties such as $root, $children, etc.</p></div> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>{{ count }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>increment<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
computed<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>count
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'inc'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'mocks a vuex store'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> $store <span class="token operator">=</span> <span class="token punctuation">{</span>
state<span class="token operator">:</span> <span class="token punctuation">{</span> count<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
dispatch<span class="token operator">:</span> jest<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
global<span class="token operator">:</span> <span class="token punctuation">{</span>
mocks<span class="token operator">:</span> <span class="token punctuation">{</span>
$store
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toContain</span><span class="token punctuation">(</span><span class="token string">'count: 1'</span><span class="token punctuation">)</span>
<span class="token keyword">await</span> wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">trigger</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>$store<span class="token punctuation">.</span>dispatch<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHaveBeenCalledWith</span><span class="token punctuation">(</span><span class="token string">'inc'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="global-plugins"><a href="#global-plugins" class="header-anchor">#</a> <code>global.plugins</code></h3> <p>Installs plugins on the component.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'installs a plugin via `plugins`'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> installed <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">class</span> <span class="token class-name">Plugin</span> <span class="token punctuation">{</span>
<span class="token keyword">static</span> <span class="token function">install</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">installed</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
global<span class="token operator">:</span> <span class="token punctuation">{</span>
plugins<span class="token operator">:</span> <span class="token punctuation">[</span>Plugin<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>installed<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHaveBeenCalled</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="global-provide"><a href="#global-provide" class="header-anchor">#</a> <code>global.provide</code></h3> <p>Provides data to be received in a <code>setup</code> function via <code>inject</code>.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Theme is {{ theme }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> inject <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'Theme'</span><span class="token punctuation">)</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
theme
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'injects dark theme via provide mounting option'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
global<span class="token operator">:</span> <span class="token punctuation">{</span>
provide<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string">'Theme'</span><span class="token operator">:</span> <span class="token string">'dark'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//=> <div>Theme is dark</div></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>Note: If you are using a ES6 <code>Symbol</code> for your provide key, you can use it as a dynamic key:</p> <p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> ThemeSymbol <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
global<span class="token operator">:</span> <span class="token punctuation">{</span>
provide<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token punctuation">[</span>ThemeSymbol<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'value'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="global-stubs"><a href="#global-stubs" class="header-anchor">#</a> <code>global.stubs</code></h3> <p>Stubs a component for all Vue Instances.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>foo</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> Foo <span class="token keyword">from</span> <span class="token string">'@/Foo.vue'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
components<span class="token operator">:</span> <span class="token punctuation">{</span> Foo <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'stubs a component using an array'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
global<span class="token operator">:</span> <span class="token punctuation">{</span>
stubs<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Foo'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toEqual</span><span class="token punctuation">(</span><span class="token string">'<div><foo-stub></div>'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'stubs a component using an Object boolean syntax'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
global<span class="token operator">:</span> <span class="token punctuation">{</span>
stubs<span class="token operator">:</span> <span class="token punctuation">{</span> Foo<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toEqual</span><span class="token punctuation">(</span><span class="token string">'<div><foo-stub></div>'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'stubs a component using a custom component'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> FooMock <span class="token operator">=</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">'Foo'</span><span class="token punctuation">,</span>
template<span class="token operator">:</span> <span class="token string">'FakeFoo'</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
global<span class="token operator">:</span> <span class="token punctuation">{</span>
stubs<span class="token operator">:</span> <span class="token punctuation">{</span> Foo<span class="token operator">:</span> FooMock <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toEqual</span><span class="token punctuation">(</span><span class="token string">'<div>FakeFoo</div>'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="wrapper-methods"><a href="#wrapper-methods" class="header-anchor">#</a> Wrapper methods</h2> <p>When you use <code>mount</code>, a <code>VueWrapper</code> is returned with a number of useful methods for testing. A <code>VueWrapper</code> is a thin wrapper around your component instance. Methods like <code>find</code> return a <code>DOMWrapper</code>, which is a thin wrapper around the DOM nodes in your component and it's children. Both implement a similar same API.</p> <h3 id="attributes"><a href="#attributes" class="header-anchor">#</a> <code>attributes</code></h3> <p>Returns attributes on a DOM node (via <code>element.attributes</code>).</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>className<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
className<span class="token operator">:</span> <span class="token string">'bar'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'attributes'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">attributes</span><span class="token punctuation">(</span><span class="token string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">attributes</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'bar'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="classes"><a href="#classes" class="header-anchor">#</a> <code>classes</code></h3> <p>Returns an array of classes on an element (via <code>classList</code>).</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>my-span<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'classes'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'.my-span'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">classes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toContain</span><span class="token punctuation">(</span><span class="token string">'my-span'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="emitted"><a href="#emitted" class="header-anchor">#</a> <code>emitted</code></h3> <p>A function that returns an object mapping events emitted from the <code>wrapper</code>. The arguments are stored in an array, so you can verify which arguments were emitted along with each event.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'greet'</span><span class="token punctuation">,</span> <span class="token string">'hello'</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'greet'</span><span class="token punctuation">,</span> <span class="token string">'goodbye'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'emitted'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">emitted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token comment">// {</span>
<span class="token comment">// greet: [ ['hello'], ['goodbye'] ]</span>
<span class="token comment">// }</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">emitted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHaveProperty</span><span class="token punctuation">(</span><span class="token string">'greet'</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">emitted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>greet<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toEqual</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'hello'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">emitted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>greet<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toEqual</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'goodbye'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="exists"><a href="#exists" class="header-anchor">#</a> <code>exists</code></h3> <p>Verify whether or not an element found via <code>find</code> exists or not.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'exists'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'span'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exists</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exists</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="find"><a href="#find" class="header-anchor">#</a> <code>find</code></h3> <p>Finds an element and returns a <code>DOMWrapper</code> if one is found. You can use the same syntax <code>querySelector</code> implements - <code>find</code> is basically an alias for <code>querySelector</code>.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Span<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">data-test</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>span<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Span<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'find'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'span'</span><span class="token punctuation">)</span> <span class="token comment">//=> found; returns DOMWrapper</span>
wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'[data-test="span"]'</span><span class="token punctuation">)</span> <span class="token comment">//=> found; returns DOMWrapper</span>
wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span> <span class="token comment">//=> nothing found; returns ErrorWrapper</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="findall"><a href="#findall" class="header-anchor">#</a> <code>findAll</code></h3> <p>Similar to <code>find</code>, but instead returns an array of <code>DOMWrapper</code>.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span>
<span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number in [1, 2, 3]<span class="token punctuation">"</span></span>
<span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span>
<span class="token attr-name">data-test</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span>
{{ number }}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'findAll'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
wrapper<span class="token punctuation">.</span><span class="token function">findAll</span><span class="token punctuation">(</span><span class="token string">'[data-test="number"]'</span><span class="token punctuation">)</span> <span class="token comment">//=> found; returns array of DOMWrapper</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="findcomponent"><a href="#findcomponent" class="header-anchor">#</a> <code>findComponent</code></h3> <p>Finds a Vue Component instance and returns a <code>VueWrapper</code> if one is found, otherwise returns <code>ErrorWrapper</code>.</p> <p><strong>Supported syntax:</strong></p> <ul><li><strong>querySelector</strong> - <code>findComponent('.component')</code> - Matches standard query selector.</li> <li><strong>Name</strong> - <code>findComponent({ name: 'myComponent' })</code> - matches PascalCase, snake-case, camelCase</li> <li><strong>ref</strong> - <code>findComponent({ ref: 'dropdown' })</code> - Can be used only on direct ref children of mounted component</li> <li><strong>SFC</strong> - <code>findComponent(ImportedComponent)</code> - Pass an imported component directly.</li></ul> <p><code>Foo.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Foo
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">'Foo'</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Span<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Foo</span> <span class="token attr-name">data-test</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> Foo <span class="token keyword">from</span> <span class="token string">'@/Foo'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
components<span class="token operator">:</span> <span class="token punctuation">{</span> Foo <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Foo <span class="token keyword">from</span> <span class="token string">'@/Foo.vue'</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'findComponent'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
<span class="token comment">// All the following queries would return a VueWrapper</span>
<span class="token comment">// Using a standard querySelector query</span>
wrapper<span class="token punctuation">.</span><span class="token function">findComponent</span><span class="token punctuation">(</span><span class="token string">'.foo'</span><span class="token punctuation">)</span>
wrapper<span class="token punctuation">.</span><span class="token function">findComponent</span><span class="token punctuation">(</span><span class="token string">'[data-test="foo"]'</span><span class="token punctuation">)</span>
<span class="token comment">// Using component's name</span>
wrapper<span class="token punctuation">.</span><span class="token function">findComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Foo'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// Using ref attribute. Can be used only on direct children of the mounted component</span>
wrapper<span class="token punctuation">.</span><span class="token function">findComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span> ref<span class="token operator">:</span> <span class="token string">'foo'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// Using imported component</span>
wrapper<span class="token punctuation">.</span><span class="token function">findComponent</span><span class="token punctuation">(</span>Foo<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="findallcomponents"><a href="#findallcomponents" class="header-anchor">#</a> <code>findAllComponents</code></h3> <p>Similar to <code>findComponent</code> but finds all Vue Component instances that match the query. Returns an array of <code>VueWrapper</code>.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p><code>Ref</code> syntax is not supported in <code>findAllComponents</code>. All other query syntaxes are valid.</p></div> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FooComponent</span>
<span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number in [1, 2, 3]<span class="token punctuation">"</span></span>
<span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span>
<span class="token attr-name">data-test</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span>
{{ number }}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FooComponent</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'findAllComponents'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
<span class="token comment">// Returns an array of VueWrapper</span>
wrapper<span class="token punctuation">.</span><span class="token function">findAllComponents</span><span class="token punctuation">(</span><span class="token string">'[data-test="number"]'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="get"><a href="#get" class="header-anchor">#</a> <code>get</code></h3> <p>Similar to <code>find</code>, <code>get</code> looks for an element and returns a <code>DOMWrapper</code> if one is found. Otherwise it throws an error.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Span<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">data-test</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>span<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Span<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
wrapper<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'span'</span><span class="token punctuation">)</span> <span class="token comment">//=> found; returns DOMWrapper</span>
wrapper<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'[data-test="span"]'</span><span class="token punctuation">)</span> <span class="token comment">//=> found; returns DOMWrapper</span>
<span class="token function">expect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> wrapper<span class="token punctuation">.</span><span class="token function">getComponent</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toThrowError</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="getcomponent"><a href="#getcomponent" class="header-anchor">#</a> <code>getComponent</code></h3> <p>Similar to <code>findComponent</code>, <code>getComponent</code> looks for a Vue Component instance and returns a <code>VueWrapper</code> if one is found. Otherwise it throws an error.</p> <p><strong>Supported syntax:</strong></p> <ul><li><strong>querySelector</strong> - <code>getComponent('.component')</code> - Matches standard query selector.</li> <li><strong>Name</strong> - <code>getComponent({ name: 'myComponent' })</code> - matches PascalCase, snake-case, camelCase</li> <li><strong>ref</strong> - <code>getComponent({ ref: 'dropdown' })</code> - Can be used only on direct ref children of mounted component</li> <li><strong>SFC</strong> - <code>getComponent(ImportedComponent)</code> - Pass an imported component directly.</li></ul> <p><code>Foo.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Foo
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">'Foo'</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Foo</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> Foo <span class="token keyword">from</span> <span class="token string">'@/Foo'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
components<span class="token operator">:</span> <span class="token punctuation">{</span> Foo <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Foo <span class="token keyword">from</span> <span class="token string">'@/Foo.vue'</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'getComponent'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
wrapper<span class="token punctuation">.</span><span class="token function">getComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'foo'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// returns a VueWrapper</span>
wrapper<span class="token punctuation">.</span><span class="token function">getComponent</span><span class="token punctuation">(</span>Foo<span class="token punctuation">)</span> <span class="token comment">// returns a VueWrapper</span>
<span class="token function">expect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> wrapper<span class="token punctuation">.</span><span class="token function">getComponent</span><span class="token punctuation">(</span><span class="token string">'.not-there'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toThrowError</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="html"><a href="#html" class="header-anchor">#</a> <code>html</code></h3> <p>Returns the HTML (via <code>outerHTML</code>) of an element. Useful for debugging.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Hello world<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'html'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//=> <div><p>Hello world</p></div></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="props-2"><a href="#props-2" class="header-anchor">#</a> <code>props</code></h3> <p>Returns props applied on a Vue Component. This should be used mostly to assert props applied to a stubbed component.</p> <p><strong>Note:</strong> Props on a normally mounted Vue Component should be asserted by their side effects on the DOM or other.</p> <p><code>Component.vue</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Foo.vue</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">'Foo'</span><span class="token punctuation">,</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
truthy<span class="token operator">:</span> Boolean<span class="token punctuation">,</span>
object<span class="token operator">:</span> Object<span class="token punctuation">,</span>
string<span class="token operator">:</span> String
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>foo</span> <span class="token attr-name">truthy</span> <span class="token attr-name">:object</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{}<span class="token punctuation">"</span></span> <span class="token attr-name">string</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>string<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> Foo <span class="token keyword">from</span> <span class="token string">'@/Foo'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
components<span class="token operator">:</span> <span class="token punctuation">{</span> Foo <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'props'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
global<span class="token operator">:</span> <span class="token punctuation">{</span> stubs<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Foo'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> foo <span class="token operator">=</span> wrapper<span class="token punctuation">.</span><span class="token function">getComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Foo'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span><span class="token function">props</span><span class="token punctuation">(</span><span class="token string">'truthy'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span><span class="token function">props</span><span class="token punctuation">(</span><span class="token string">'object'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toEqual</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span><span class="token function">props</span><span class="token punctuation">(</span><span class="token string">'notExisting'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toEqual</span><span class="token punctuation">(</span><span class="token keyword">undefined</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span><span class="token function">props</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toEqual</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
truthy<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
object<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
string<span class="token operator">:</span> <span class="token string">'string'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="setprops"><a href="#setprops" class="header-anchor">#</a> <code>setProps</code></h3> <p>Updates component props.</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>You should use <code>await</code> when you call <code>setProps</code> to ensure that Vue updates the DOM before you make an assertion.</p></div> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
props<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'message'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'updates prop'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">,</span> <span class="token punctuation">{</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
message<span class="token operator">:</span> <span class="token string">'hello'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toContain</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span>
<span class="token keyword">await</span> wrapper<span class="token punctuation">.</span><span class="token function">setProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span> message<span class="token operator">:</span> <span class="token string">'goodbye'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toContain</span><span class="token punctuation">(</span><span class="token string">'goodbye'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="setvalue"><a href="#setvalue" class="header-anchor">#</a> <code>setValue</code></h3> <p>Sets a value on DOM element. Including:</p> <ul><li><code><input></code> <ul><li><code>type="checkbox"</code> and <code>type="radio"</code> are detected and will have <code>element.checked</code> set</li></ul></li> <li><code><select></code> <ul><li><code><option></code> is detected and will have <code>element.selected</code> set</li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>You should use <code>await</code> when you call <code>setValue</code> to ensure that Vue updates the DOM before you make an assertion.</p></div> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checked<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checked<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>The input has been checked!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
checked<span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'checked'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
<span class="token keyword">await</span> wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
<span class="token keyword">await</span> wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="text"><a href="#text" class="header-anchor">#</a> <code>text</code></h3> <p>Returns the text (via <code>textContent</code>) of an element.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Hello world<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'text'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'Hello world'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="trigger"><a href="#trigger" class="header-anchor">#</a> <code>trigger</code></h3> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Since events often cause a re-render, <code>trigger</code> returns <code>Vue.nextTick</code>. You should use <code>await</code> when you call <code>trigger</code> to ensure that Vue updates the DOM before you make an assertion.</p></div> <p>Triggers an event, for example <code>click</code>, <code>submit</code> or <code>keyup</code>.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Count: {{ count }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>count++<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Click me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
count<span class="token operator">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'trigger'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
<span class="token keyword">await</span> wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">trigger</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">)</span>
<span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'span'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'Count: 1'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>Note that <code>trigger</code> accepts a second argument to pass options to the triggered Event:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">await</span> wrapper<span class="token punctuation">.</span><span class="token function">trigger</span><span class="token punctuation">(</span><span class="token string">'keydown'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> keyCode<span class="token operator">:</span> <span class="token number">65</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="unmount"><a href="#unmount" class="header-anchor">#</a> <code>unmount</code></h3> <p>Unmount the application from the DOM via Vue's <code>unmount</code> method. Only works on the root <code>VueWrapper</code> returned from <code>mount</code>. Useful for manual clean-up after tests.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'unmount'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span>
wrapper<span class="token punctuation">.</span><span class="token function">unmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// removed from DOM</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/vue-test-utils-next-docs/assets/js/app.18d340b2.js" defer></script><script src="/vue-test-utils-next-docs/assets/js/2.5735719d.js" defer></script><script src="/vue-test-utils-next-docs/assets/js/6.143c886c.js" defer></script>
</body>
</html>