File tree 2 files changed +51
-1
lines changed
2 files changed +51
-1
lines changed Original file line number Diff line number Diff line change @@ -58,6 +58,56 @@ expect(wrapper.emitted().foo[1]).toEqual([123])
58
58
59
59
你也可以调用 [ ` wrapper.emittedByOrder() ` ] ( ../api/wrapper/emittedByOrder.md ) 获取一个按触发先后排序的事件数组。
60
60
61
+ ### 从子组件触发事件
62
+
63
+ 你可以通过访问子组件实例来触发一个自定义事件
64
+
65
+ ** 待测试的组件**
66
+
67
+ ``` html
68
+ <template >
69
+ <div >
70
+ <child-component @custom =" onCustom" />
71
+ <p v-if =" emitted" >触发!</p >
72
+ </div >
73
+ </template >
74
+
75
+ <script >
76
+ import ChildComponent from ' ./ChildComponent'
77
+
78
+ export default {
79
+ name: ' ParentComponent' ,
80
+ components: { ChildComponent },
81
+ data () {
82
+ return {
83
+ emitted: false
84
+ }
85
+ },
86
+ methods: {
87
+ onCustom () {
88
+ this .emitted = true
89
+ }
90
+ }
91
+ }
92
+ </script >
93
+ ```
94
+
95
+ ** 测试代码**
96
+
97
+ ``` js
98
+ import { shallowMount } from ' @vue/test-utils'
99
+ import ParentComponent from ' @/components/ParentComponent'
100
+ import ChildComponent from ' @/components/ChildComponent'
101
+
102
+ describe (' ParentComponent' , () => {
103
+ it (" displays 'Emitted!' when custom event is emitted" , () => {
104
+ const wrapper = shallowMount (ParentComponent)
105
+ wrapper .find (ChildComponent).vm .$emit (' custom' )
106
+ expect (wrapper .html ()).toContain (' Emitted!' )
107
+ })
108
+ })
109
+ ```
110
+
61
111
### 操作组件状态
62
112
63
113
你可以在包裹器上用 ` setData ` 或 ` setProps ` 方法直接操作组件状态:
Original file line number Diff line number Diff line change @@ -95,7 +95,7 @@ describe('Actions.vue', () => {
95
95
96
96
这里发生了什么?首先我们用 ` localVue.use ` 方法告诉 Vue 使用 Vuex。这只是 ` Vue.use ` 的一个包裹器。
97
97
98
- 然后我们用 ` new Vuex.store ` 伪造了一个 store 并填入假数据。我们只把它传递给 action,因为我们只关心这个。
98
+ 然后我们用 ` new Vuex.Store ` 伪造了一个 store 并填入假数据。我们只把它传递给 action,因为我们只关心这个。
99
99
100
100
该 action 是 [ Jest 伪造函数] ( https://facebook.github.io/jest/docs/en/mock-functions.html ) 。这些伪造函数让我们去断言该 action 是否被调用。
101
101
You can’t perform that action at this time.
0 commit comments