Skip to content

Commit cbeac14

Browse files
feat: update props docs
1 parent 9e32a56 commit cbeac14

File tree

1 file changed

+53
-1
lines changed

1 file changed

+53
-1
lines changed

src/api/README.md

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -576,7 +576,6 @@ Similar to `findComponent` but finds all Vue Component instances that match the
576576

577577
**Note** - `Ref` is not supported here.
578578

579-
580579
```vue
581580
<template>
582581
<div>
@@ -717,6 +716,59 @@ test('attributes', () => {
717716
})
718717
```
719718

719+
### `props`
720+
721+
Returns props applied on a Vue Component. This should be used mostly to assert props applied to a stubbed component.
722+
723+
**Note:** Props on a normally mounted Vue Component should be asserted by their side effects on the DOM or other.
724+
725+
`Component.vue`:
726+
```js
727+
// Foo.vue
728+
export default {
729+
name: 'Foo',
730+
props: {
731+
truthy: Boolean,
732+
object: Object,
733+
string: String
734+
}
735+
}
736+
```
737+
738+
```vue
739+
<template>
740+
<div><foo truthy :object="{}" string="string" /></div>
741+
</template>
742+
743+
<script>
744+
import Foo from '@/Foo'
745+
746+
export default {
747+
components: { Foo }
748+
}
749+
</script>
750+
```
751+
752+
`Component.spec.js`:
753+
754+
```js
755+
test('props', () => {
756+
const wrapper = mount(Component, {
757+
global: { stubs: ['Foo'] }
758+
})
759+
const foo = wrapper.findComponent({ name: 'Foo' })
760+
761+
expect(foo.props('truthy')).toBe(true)
762+
expect(foo.props('object')).toEqual({})
763+
expect(foo.props('notExisting')).toEqual(undefined)
764+
expect(foo.props()).toEqual({
765+
truthy: true,
766+
object: {},
767+
string: 'string'
768+
})
769+
})
770+
```
771+
720772
### `emitted`
721773

722774
A function that returns an object mapping events emitted from the `wrapper`. The arguments are stored in an array, so you can verify which arguments were emitted each time the event is emitted.

0 commit comments

Comments
 (0)