Skip to content

Commit fd242b8

Browse files
chore: add docs
1 parent 7052f2b commit fd242b8

File tree

1 file changed

+79
-0
lines changed

1 file changed

+79
-0
lines changed

docs/API.md

+79
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,85 @@ test('findAll', () => {
348348
})
349349
```
350350

351+
### `findComponent`
352+
353+
Finds a Vue Component instance and returns a `VueWrapper` if one is found, otherwise returns `ErrorWrapper`.
354+
355+
**Supported syntax:**
356+
357+
* **querySelector** - `findComponent('.component')` - Matches standard query selector.
358+
* **Name** - `findComponent({ name: 'myComponent' })` - matches PascalCase, snake-case, camelCase
359+
* **ref** - `findComponent({ ref: 'dropdown' })` - Can be used only on direct ref children of mounted component
360+
* **SFC** - `findComponent(ImportedComponent)` - Pass an imported component directly.
361+
362+
```vue
363+
<template>
364+
<div class="foo">
365+
Foo
366+
</div>
367+
</template>
368+
<script>
369+
export default { name: 'Foo' }
370+
</script>
371+
```
372+
373+
```vue
374+
<template>
375+
<div>
376+
<span>Span</span>
377+
<Foo data-test="foo" ref="foo"/>
378+
</div>
379+
</template>
380+
```
381+
382+
```js
383+
test('find', () => {
384+
const wrapper = mount(Component)
385+
386+
wrapper.find('.foo') //=> found; returns VueWrapper
387+
wrapper.find('[data-test="foo"]') //=> found; returns VueWrapper
388+
wrapper.find({ name: 'Foo' }) //=> found; returns VueWrapper
389+
wrapper.find({ name: 'foo' }) //=> found; returns VueWrapper
390+
wrapper.find({ ref: 'foo' }) //=> found; returns VueWrapper
391+
wrapper.find(Foo) //=> found; returns VueWrapper
392+
})
393+
```
394+
395+
### `findAllComponents`
396+
397+
Similar to `findComponent` but finds all Vue Component instances that match the query and returns an array of `VueWrapper`.
398+
399+
**Supported syntax:**
400+
401+
* **querySelector** - `findAllComponents('.component')`
402+
* **Name** - `findAllComponents({ name: 'myComponent' })`
403+
* **SFC** - `findAllComponents(ImportedComponent)`
404+
405+
**Note** - `Ref` is not supported here.
406+
407+
408+
```vue
409+
<template>
410+
<div>
411+
<FooComponent
412+
v-for="number in [1, 2, 3]"
413+
:key="number"
414+
data-test="number"
415+
>
416+
{{ number }}
417+
</FooComponent>
418+
</div>
419+
</template>
420+
```
421+
422+
```js
423+
test('findAllComponents', () => {
424+
const wrapper = mount(Component)
425+
426+
wrapper.findAllComponents('[data-test="number"]') //=> found; returns array of VueWrapper
427+
})
428+
```
429+
351430
### `trigger`
352431

353432
Simulates an event, for example `click`, `submit` or `keyup`. Since events often cause a re-render, `trigger` returs `Vue.nextTick`. If you expect the event to trigger a re-render, you should use `await` when you call `trigger` to ensure that Vue updates the DOM before you make an assertion.

0 commit comments

Comments
 (0)