teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問MetaInfoのheadについてテストしたい

編集履歴

質問編集履歴

7

コード例の変更

2021/12/16 06:52

投稿

hello_space
hello_space

スコア24

title CHANGED
File without changes
body CHANGED
@@ -19,7 +19,7 @@
19
19
 
20
20
  beforeEach(() => {
21
21
  localVue.use(Vuex)
22
- const obj = { name: 'test-title' }
22
+ const obj = { title: 'test-title' }
23
23
  getters = { ...mapGetters(['path/path', {data: () => obj } as any]) }
24
24
  store = new Vuex.Store({ getters })
25
25
 
@@ -52,9 +52,9 @@
52
52
  export default class Component extends Vue {
53
53
  @Getter('path/path') data!: any
54
54
  head(): MetaInfo {
55
- const {name} = this.data
55
+ const {title} = this.data
56
56
  return {
57
- title: name
57
+ title: title
58
58
  }
59
59
  }
60
60
  }
@@ -83,7 +83,7 @@
83
83
 
84
84
  beforeEach(() => {
85
85
  localVue.use(Vuex)
86
- const obj = { name: 'test-title' }
86
+ const obj = { title: 'test-title' }
87
87
 
88
88
  wrapper = mount(Component, {
89
89
  // mockで$storeを設定
@@ -113,6 +113,6 @@
113
113
 
114
114
  ```
115
115
  Expected: "test-title" │
116
- Received: "mappedGetter"
116
+ Received: "undefined"
117
117
  ```
118
118
  となってしまいます。こちらわかる方いましたらご回答お願いいたします。

6

コメントの追加

2021/12/16 06:52

投稿

hello_space
hello_space

スコア24

title CHANGED
File without changes
body CHANGED
@@ -86,6 +86,7 @@
86
86
  const obj = { name: 'test-title' }
87
87
 
88
88
  wrapper = mount(Component, {
89
+ // mockで$storeを設定
89
90
  mocks: {
90
91
  $store: {
91
92
  getters: {

5

エラー解決の追記（回答受付中）

2021/12/16 01:38

投稿

hello_space
hello_space

スコア24

title CHANGED
File without changes
body CHANGED
@@ -12,7 +12,6 @@
12
12
 
13
13
  describe('test', () => {
14
14
  const localVue = createLocalVue()
15
- const id = 'test-id'
16
15
 
17
16
  let wrapper: any
18
17
  let getters: any
@@ -67,4 +66,52 @@
67
66
  [Vue warn]: Error in getter for watcher "$metaInfo": "TypeError: Cannot read properties of undefined (reading '$store')"
68
67
 
69
68
  ```
70
- 上記のようなエラーが発生してしまいます。こちらどのようにすればエラーを解決できるか教えていただきたく投稿させていただきました。よろしくお願いいたします。
69
+ 上記のようなエラーが発生してしまいます。こちらどのようにすればエラーを解決できるか教えていただきたく投稿させていただきました。よろしくお願いいたします。
70
+
71
+ 追記
72
+
73
+ ```
74
+ import Component from '@/pages/component'
75
+ import { createLocalVue, mount } from '@vue/test-utils'
76
+ import VueMeta from 'vue-meta'
77
+ import Vuex, { mapGetters } from 'vuex'
78
+
79
+ describe('test', () => {
80
+ const localVue = createLocalVue()
81
+
82
+ let wrapper: any
83
+
84
+ beforeEach(() => {
85
+ localVue.use(Vuex)
86
+ const obj = { name: 'test-title' }
87
+
88
+ wrapper = mount(Component, {
89
+ mocks: {
90
+ $store: {
91
+ getters: {
92
+ ...mapGetters(['path/path', { data: () => obj } as any]),
93
+ },
94
+ },
95
+ }
96
+ )
97
+ })
98
+
99
+ afterEach(() => {
100
+ if (wrapper) {
101
+ wrapper.destroy()
102
+ }
103
+ })
104
+
105
+ it('should have head title', () => {
106
+ localVue.use(VueMeta, { keyName: 'head' })
107
+ expect(wrapper.vm.$metaInfo.title).toBe('test-title')
108
+ })
109
+ ```
110
+
111
+ 上記のような形でエラーは解消できました！ただ、テストの結果が
112
+
113
+ ```
114
+ Expected: "test-title" │
115
+ Received: "mappedGetter"
116
+ ```
117
+ となってしまいます。こちらわかる方いましたらご回答お願いいたします。

4

不要な記述の削除

2021/12/16 01:06

投稿

hello_space
hello_space

スコア24

title CHANGED
File without changes
body CHANGED
@@ -24,14 +24,7 @@
24
24
  getters = { ...mapGetters(['path/path', {data: () => obj } as any]) }
25
25
  store = new Vuex.Store({ getters })
26
26
 
27
- wrapper = mount(Component, {
27
+ wrapper = mount(Component, {store})
28
- mocks: {
29
- $route: {
30
- params: { id },
31
- },
32
- },
33
- store,
34
- })
35
28
  })
36
29
 
37
30
  afterEach(() => {

3

誤字の修正

2021/12/16 00:11

投稿

hello_space
hello_space

スコア24

title CHANGED
File without changes
body CHANGED
@@ -21,7 +21,7 @@
21
21
  beforeEach(() => {
22
22
  localVue.use(Vuex)
23
23
  const obj = { name: 'test-title' }
24
- getters = { ...mapGetters(['path/path', { detail: () => obj } as any]) }
24
+ getters = { ...mapGetters(['path/path', {data: () => obj } as any]) }
25
25
  store = new Vuex.Store({ getters })
26
26
 
27
27
  wrapper = mount(Component, {

2

誤字の修正

2021/12/15 18:15

投稿

hello_space
hello_space

スコア24

title CHANGED
File without changes
body CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  import Component from '@/pages/component'
9
9
  import { createLocalVue, mount } from '@vue/test-utils'
10
- import VueMeta from 've-meta'
10
+ import VueMeta from 'vue-meta'
11
11
  import Vuex, { mapGetters } from 'vuex'
12
12
 
13
13
  describe('test', () => {

1

誤字の修正

2021/12/15 18:14

投稿

hello_space
hello_space

スコア24

title CHANGED
File without changes
body CHANGED
@@ -74,81 +74,4 @@
74
74
  [Vue warn]: Error in getter for watcher "$metaInfo": "TypeError: Cannot read properties of undefined (reading '$store')"
75
75
 
76
76
  ```
77
- 上記のようなエラーが発生してしまいます。こちらどのようにすればエラーを解決できるか教えていただきたく投稿させていただきました。よろしくお願いいたします。
78
- nuxt.jsでユニットテストを作成しています。
79
- https://stackoverflow.com/questions/59964001/how-to-test-head-in-nuxt-js-using-jest
80
- こちらの記事を参考にvue-metaのhead()のテストを書いてみました。
81
-
82
- ```
83
- // sample.spec.ts
84
-
85
- import Component from '@/pages/component'
86
- import { createLocalVue, mount } from '@vue/test-utils'
87
- import VueMeta from 'vue-meta'
88
- import Vuex, { mapGetters } from 'vuex'
89
-
90
- describe('test', () => {
91
- const localVue = createLocalVue()
92
- const id = 'test-id'
93
-
94
- let wrapper: any
95
- let getters: any
96
- let store: any
97
-
98
- beforeEach(() => {
99
- localVue.use(Vuex)
100
- const obj = { name: 'test-title' }
101
- getters = { ...mapGetters(['path/path', { detail: () => obj } as any]) }
102
- store = new Vuex.Store({ getters })
103
-
104
- wrapper = mount(Component, {
105
- mocks: {
106
- $route: {
107
- params: { id },
108
- },
109
- },
110
- store,
111
- })
112
- })
113
-
114
- afterEach(() => {
115
- if (wrapper) {
116
- wrapper.destroy()
117
- }
118
- })
119
-
120
- it('should have head title', () => {
121
- localVue.use(VueMeta, { keyName: 'head' })
122
- expect(wrapper.vm.$metaInfo.title).toBe('test-title')
123
- })
124
- ```
125
-
126
- ```
127
- // sample.vue
128
- <template>
129
- <div></div>
130
- </template>
131
-
132
- <script lang="ts">
133
- import { Component, Getter, Vue } from 'nuxt-property-decorator'
134
- import type { MetaInfo } from 'vue-meta'
135
-
136
- @Component
137
- export default class Component extends Vue {
138
- @Getter('path/path') data!: any
139
- head(): MetaInfo {
140
- const {name} = this.data
141
- return {
142
- title: name
143
- }
144
- }
145
- }
146
- </script>
147
- ```
148
-
149
- - 発生しているエラー
150
- ```
151
- [Vue warn]: Error in getter for watcher "$metaInfo": "TypeError: Cannot read properties of undefined (reading '$store')"
152
-
153
- ```
154
77
  上記のようなエラーが発生してしまいます。こちらどのようにすればエラーを解決できるか教えていただきたく投稿させていただきました。よろしくお願いいたします。