teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問[Nuxt]テストが通らない

編集履歴

質問編集履歴

4

tweaks

2020/07/12 10:22

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -126,21 +126,17 @@
126
126
 
127
127
  modules: {
128
128
 
129
- modules: {
129
+ fruits: {
130
130
 
131
- fruits: {
131
+ getters: {
132
132
 
133
- getters: {
133
+ FRUITS: () => [{ id: 1, name: 'apple' }]
134
134
 
135
- fruits: () => [{ id: 1, name: 'apple' }]
135
+ },
136
136
 
137
- },
137
+ actions: {
138
138
 
139
- actions: {
140
-
141
- GET_FRUITS: jest.fn()
139
+ GET_FRUITS: jest.fn()
142
-
143
- }
144
140
 
145
141
  }
146
142
 

3

title

2020/07/12 10:22

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- tweaksVue(Nuxt)でテストの通し方が分からない
1
+ [Nuxt]テストが通らない
test CHANGED
File without changes

2

tweaks

2020/07/12 10:20

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Vue(Nuxt)でテストの通し方が分からない
1
+ tweaksVue(Nuxt)でテストの通し方が分からない
test CHANGED
@@ -24,10 +24,6 @@
24
24
 
25
25
  # アプリ側のソースコード
26
26
 
27
- createdする時にstoreからfruitsを取ってきてfruitsの名前を表示しているだけの非常にシンプルな実装となっております。
28
-
29
-
30
-
31
27
  ```vue
32
28
 
33
29
  <!-- src/pages/fruits/index.vue -->
@@ -40,7 +36,7 @@
40
36
 
41
37
  <div
42
38
 
43
- v-for="f in fruits"
39
+ v-for="f in getFruits"
44
40
 
45
41
  :key="f.id"
46
42
 
@@ -62,13 +58,7 @@
62
58
 
63
59
  import { mapActions, mapGetters } from 'vuex'
64
60
 
65
- import {
66
-
67
- FRUITS_ACTION_TYPES,
68
-
69
- FRUITS_GETTER_TYPES
70
-
71
- } from '~/store/pages/fruits/index.ts'
61
+ import { ACTION_TYPES, GETTER_TYPES } from '~/store/pages/fruits/index'
72
62
 
73
63
 
74
64
 
@@ -78,17 +68,9 @@
78
68
 
79
69
  ...mapGetters({
80
70
 
81
- fruits: FRUITS_GETTER_TYPES.FRUITS,
71
+ fruits: GETTER_TYPES.FRUITS,
82
72
 
83
73
  })
84
-
85
- },
86
-
87
-
88
-
89
- created() {
90
-
91
- this.getFruits()
92
74
 
93
75
  },
94
76
 
@@ -98,7 +80,7 @@
98
80
 
99
81
  ...mapActions({
100
82
 
101
- getFruits: FRUITS_ACTION_TYPES.GET_FRUITS,
83
+ getFruits: ACTION_TYPES.GET_FRUITS,
102
84
 
103
85
  })
104
86
 
@@ -107,92 +89,6 @@
107
89
  }
108
90
 
109
91
  </script>
110
-
111
- ```
112
-
113
-
114
-
115
- ```ts
116
-
117
- // src/store/pages/fruits/index.ts
118
-
119
- // 今回はstoreのテストを書くわけではないので、多少処理を省いてます
120
-
121
-
122
-
123
- export type State = {
124
-
125
- fruits: any[]
126
-
127
- }
128
-
129
-
130
-
131
- export const state = (): State => ({
132
-
133
- fruits: []
134
-
135
- })
136
-
137
-
138
-
139
- const MUTATION_TYPES = {
140
-
141
- SET_FRUITS: 'SET_FRUITS'
142
-
143
- }
144
-
145
-
146
-
147
- const ACTION_TYPES = {
148
-
149
- GET_FRUITS: 'GET_FRUITS'
150
-
151
- }
152
-
153
-
154
-
155
- const GETTER_TYPES = {
156
-
157
- FRUITS: 'FRUITS'
158
-
159
- }
160
-
161
-
162
-
163
- export const mutations: MutationTree<State> = {
164
-
165
- [MUTATION_TYPES.SET_FRUITS](state, { fruits }) {
166
-
167
- state.fruits = fruits
168
-
169
- },
170
-
171
- }
172
-
173
-
174
-
175
- export const actions: ActionTree<State, RootState> = {
176
-
177
- async [ACTION_TYPES.GET_FRUITS](context) {
178
-
179
- const res = hogehoge
180
-
181
- context.commit(MUTATION_TYPES.SET_FRUITS, { fruits: res })
182
-
183
- }
184
-
185
- }
186
-
187
-
188
-
189
- export const getters: GetterTree<State, RootState> = {
190
-
191
- [GETTER_TYPES.FRUITS]: (state) => state.fruits
192
-
193
- }
194
-
195
-
196
92
 
197
93
  ```
198
94
 
@@ -212,7 +108,7 @@
212
108
 
213
109
  import Vuex from 'vuex'
214
110
 
215
- import * as fruits from '~/store/pages/fruits/index.ts'
111
+ import * as fruits from '~/store/pages/fruits/index'
216
112
 
217
113
 
218
114
 
@@ -224,47 +120,27 @@
224
120
 
225
121
  describe('Index', () => {
226
122
 
227
- let s: any = {}
123
+ let s
228
124
 
229
- beforeEach(() => {
230
-
231
- s = {
125
+ s = {
232
126
 
233
127
  modules: {
234
128
 
235
- fruits: {
129
+ modules: {
236
130
 
237
- namespaced: true,
131
+ fruits: {
238
132
 
239
- state: {
133
+ getters: {
240
134
 
241
- fruits: []
135
+ fruits: () => [{ id: 1, name: 'apple' }]
242
136
 
243
- },
137
+ },
244
138
 
245
- actions: {
139
+ actions: {
246
140
 
247
- GET_FRUITS({ commit }) {
141
+ GET_FRUITS: jest.fn()
248
-
249
- commit('SET_FRUITS', [])
250
142
 
251
143
  }
252
-
253
- },
254
-
255
- mutations: {
256
-
257
- SET_FRUITS(state, fruits) {
258
-
259
- state.fruits = fruits
260
-
261
- }
262
-
263
- },
264
-
265
- getters: {
266
-
267
- ...fruits.getters
268
144
 
269
145
  }
270
146
 

1

tweaks

2020/07/12 10:20

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Vue(Nuxt)でテストが通らない
1
+ Vue(Nuxt)でテストの通し方が分からない
test CHANGED
@@ -2,13 +2,15 @@
2
2
 
3
3
  `fruits`の名前を表示するだけの簡単なアプリケーションをNuxtで作成し、そのテストを書こうとしています。
4
4
 
5
- 実装自体は完了しており、問題なく動作しております。ただ、その実装部分のテストがどうしても通らず、詰まってしまったため質問させていただきたいです。
5
+ 実装自体は完了しており問題なく動作していますが、テストがどうしても通らず詰まってしまったため質問させていただきたいです。
6
6
 
7
7
 
8
8
 
9
9
  # 問題点
10
10
 
11
+ テストを流すと以下のようなエラーが返ってきて落ちてしまします。
12
+
11
- テストを流すと以下のようなエラーが返ってきてしまいます。storeに処理を書いている場合のテストの書き方が分からないため、もしご存知の方がいらっしゃいましたら教えていただきたいです。
13
+ storeに処理を分けて書いている場合のテストの書き方が分からないため、もしご存知の方がいらっしゃいましたら教えていただきたいです。
12
14
 
13
15
  ```
14
16
 
@@ -22,7 +24,7 @@
22
24
 
23
25
  # アプリ側のソースコード
24
26
 
25
- ????のような感じで、createdする時にstoreからfruitsを取ってきてfruitsの名前を表示しているだけの非常にシンプルな実装となっております。
27
+ createdする時にstoreからfruitsを取ってきてfruitsの名前を表示しているだけの非常にシンプルな実装となっております。
26
28
 
27
29
 
28
30
 
@@ -30,6 +32,8 @@
30
32
 
31
33
  <!-- src/pages/fruits/index.vue -->
32
34
 
35
+
36
+
33
37
  <template>
34
38
 
35
39
  <div>
@@ -40,7 +44,7 @@
40
44
 
41
45
  :key="f.id"
42
46
 
43
- class="fruitsItem"
47
+ class="Item"
44
48
 
45
49
  >
46
50
 
@@ -54,9 +58,7 @@
54
58
 
55
59
 
56
60
 
57
- <script lang="ts">
61
+ <script>
58
-
59
- import Vue from 'vue'
60
62
 
61
63
  import { mapActions, mapGetters } from 'vuex'
62
64
 
@@ -70,7 +72,7 @@
70
72
 
71
73
 
72
74
 
73
- export default Vue.extend({
75
+ export default {
74
76
 
75
77
  computed: {
76
78
 
@@ -102,106 +104,106 @@
102
104
 
103
105
  }
104
106
 
107
+ }
108
+
109
+ </script>
110
+
111
+ ```
112
+
113
+
114
+
115
+ ```ts
116
+
117
+ // src/store/pages/fruits/index.ts
118
+
119
+ // 今回はstoreのテストを書くわけではないので、多少処理を省いてます
120
+
121
+
122
+
123
+ export type State = {
124
+
125
+ fruits: any[]
126
+
127
+ }
128
+
129
+
130
+
131
+ export const state = (): State => ({
132
+
133
+ fruits: []
134
+
105
135
  })
106
136
 
137
+
138
+
139
+ const MUTATION_TYPES = {
140
+
141
+ SET_FRUITS: 'SET_FRUITS'
142
+
143
+ }
144
+
145
+
146
+
147
+ const ACTION_TYPES = {
148
+
149
+ GET_FRUITS: 'GET_FRUITS'
150
+
151
+ }
152
+
153
+
154
+
155
+ const GETTER_TYPES = {
156
+
107
- </script>
157
+ FRUITS: 'FRUITS'
158
+
108
-
159
+ }
160
+
161
+
162
+
163
+ export const mutations: MutationTree<State> = {
164
+
165
+ [MUTATION_TYPES.SET_FRUITS](state, { fruits }) {
166
+
167
+ state.fruits = fruits
168
+
169
+ },
170
+
171
+ }
172
+
173
+
174
+
175
+ export const actions: ActionTree<State, RootState> = {
176
+
177
+ async [ACTION_TYPES.GET_FRUITS](context) {
178
+
179
+ const res = hogehoge
180
+
181
+ context.commit(MUTATION_TYPES.SET_FRUITS, { fruits: res })
182
+
183
+ }
184
+
185
+ }
186
+
187
+
188
+
189
+ export const getters: GetterTree<State, RootState> = {
190
+
191
+ [GETTER_TYPES.FRUITS]: (state) => state.fruits
192
+
193
+ }
194
+
195
+
196
+
109
- ```
197
+ ```
198
+
199
+
200
+
110
-
201
+ # テスト側のソースコード
202
+
111
-
203
+ とりあえず、fruitsが一つでも表示されているか(= `Item`classが一つでも存在するか)をテストしようとしています
112
204
 
113
205
  ```ts
114
206
 
115
- // src/store/pages/fruits/index.ts
116
-
117
- // 今回はstoreのテストを書くわけではないので、多少処理を省いてます
118
-
119
-
120
-
121
- export type State = {
122
-
123
- fruits: any[]
124
-
125
- }
126
-
127
-
128
-
129
- export const state = (): State => ({
130
-
131
- fruits: []
132
-
133
- })
134
-
135
-
136
-
137
- const MUTATION_TYPES = {
138
-
139
- SET_FRUITS: 'SET_FRUITS'
140
-
141
- }
142
-
143
-
144
-
145
- const ACTION_TYPES = {
146
-
147
- GET_FRUITS: 'GET_FRUITS'
148
-
149
- }
150
-
151
-
152
-
153
- const GETTER_TYPES = {
154
-
155
- FRUITS: 'FRUITS'
156
-
157
- }
158
-
159
-
160
-
161
- export const mutations: MutationTree<State> = {
162
-
163
- [MUTATION_TYPES.SET_FRUITS](state, { fruits }) {
164
-
165
- state.fruits = fruits
166
-
167
- },
168
-
169
- }
170
-
171
-
172
-
173
- export const actions: ActionTree<State, RootState> = {
174
-
175
- async [ACTION_TYPES.GET_FRUITS](context) {
176
-
177
- const res = hogehoge
178
-
179
- context.commit(MUTATION_TYPES.SET_FRUITS, { fruits: res })
180
-
181
- }
182
-
183
- }
184
-
185
-
186
-
187
- export const getters: GetterTree<State, RootState> = {
188
-
189
- [GETTER_TYPES.FRUITS]: (state) => state.fruits
190
-
191
- }
192
-
193
-
194
-
195
- ```
196
-
197
-
198
-
199
- # テスト側のソースコード
200
-
201
- とりあえず、fruitsが一つでも表示されているか(`fruitsItem`classが一つでも存在するか)をテストしようとしています
202
-
203
- ```ts
204
-
205
207
  // tests/pages/fruits/index.spec.ts
206
208
 
207
209
 
@@ -290,7 +292,7 @@
290
292
 
291
293
  it('shows', () => {
292
294
 
293
- expect(wrapper.find('.fruitsItem').exists()).toBe(true)
295
+ expect(wrapper.find('.Item').exists()).toBe(true)
294
296
 
295
297
  })
296
298