File tree 1 file changed +48
-0
lines changed
1 file changed +48
-0
lines changed Original file line number Diff line number Diff line change @@ -58,6 +58,54 @@ expect(wrapper.emitted().foo[1]).toEqual([123])
58
58
59
59
You can also get an Array of the events in their emit order by calling [ ` wrapper.emittedByOrder() ` ] ( ../api/wrapper/emittedByOrder.md ) .
60
60
61
+ ### Emitting Event from Child Component
62
+
63
+ You can emit a custom event from a child component by accessing the instance.
64
+
65
+ ** Component under test**
66
+ ``` html
67
+ <template >
68
+ <div >
69
+ <child-component @custom =" onCustom" />
70
+ <p v-if =" emitted" >Emitted!</p >
71
+ </div >
72
+ </template >
73
+
74
+ <script >
75
+ import ChildComponent from ' ./ChildComponent'
76
+
77
+ export default {
78
+ name: ' ParentComponent' ,
79
+ components: { ChildComponent },
80
+ data () {
81
+ return {
82
+ emitted: false
83
+ }
84
+ },
85
+ methods: {
86
+ onCustom () {
87
+ this .emitted = true
88
+ }
89
+ }
90
+ }
91
+ </script >
92
+ ```
93
+
94
+ ** Test**
95
+ ``` js
96
+ import { shallowMount } from ' @vue/test-utils'
97
+ import ParentComponent from ' @/components/ParentComponent'
98
+ import ChildComponent from ' @/components/ChildComponent'
99
+
100
+ describe (' ParentComponent' , () => {
101
+ it (" displays 'Emitted!' when custom event is emitted" , () => {
102
+ const wrapper = shallowMount (ParentComponent)
103
+ wrapper .find (ChildComponent).vm .$emit (' custom' )
104
+ expect (wrapper .html ()).toContain (' Emitted!' )
105
+ })
106
+ })
107
+ ```
108
+
61
109
### Manipulating Component State
62
110
63
111
You can directly manipulate the state of the component using the ` setData ` or ` setProps ` method on the wrapper:
You can’t perform that action at this time.
0 commit comments