質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

ユニットテスト

ユニットテストは、システムのテスト手法の一つで、個々のモジュールを対象としたテストの事を指します。対象のモジュールが要求や性能を満たしているか確認する為に実行します。

解決済

MetaInfoのheadについてテストしたい

hello_space
hello_space

総合スコア23

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

ユニットテスト

ユニットテストは、システムのテスト手法の一つで、個々のモジュールを対象としたテストの事を指します。対象のモジュールが要求や性能を満たしているか確認する為に実行します。

1回答

0評価

0クリップ

354閲覧

投稿2021/12/15 18:10

編集2021/12/16 06:52

nuxt.jsでユニットテストを作成しています。
https://stackoverflow.com/questions/59964001/how-to-test-head-in-nuxt-js-using-jest
こちらの記事を参考にvue-metaのhead()のテストを書きました。

// sample.spec.ts import Component from '@/pages/component' import { createLocalVue, mount } from '@vue/test-utils' import VueMeta from 'vue-meta' import Vuex, { mapGetters } from 'vuex' describe('test', () => { const localVue = createLocalVue() let wrapper: any let getters: any let store: any beforeEach(() => { localVue.use(Vuex) const obj = { title: 'test-title' } getters = { ...mapGetters(['path/path', {data: () => obj } as any]) } store = new Vuex.Store({ getters }) wrapper = mount(Component, {store}) }) afterEach(() => { if (wrapper) { wrapper.destroy() } }) it('should have head title', () => { localVue.use(VueMeta, { keyName: 'head' }) expect(wrapper.vm.$metaInfo.title).toBe('test-title') })
// sample.vue <template> <div></div> </template> <script lang="ts"> import { Component, Getter, Vue } from 'nuxt-property-decorator' import type { MetaInfo } from 'vue-meta' @Component export default class Component extends Vue { @Getter('path/path') data!: any head(): MetaInfo { const {title} = this.data return { title: title } } } </script>
  • 発生しているエラー
[Vue warn]: Error in getter for watcher "$metaInfo": "TypeError: Cannot read properties of undefined (reading '$store')"

上記のようなエラーが発生してしまいます。こちらどのようにすればエラーを解決できるか教えていただきたく投稿させていただきました。よろしくお願いいたします。

追記

import Component from '@/pages/component' import { createLocalVue, mount } from '@vue/test-utils' import VueMeta from 'vue-meta' import Vuex, { mapGetters } from 'vuex' describe('test', () => { const localVue = createLocalVue() let wrapper: any beforeEach(() => { localVue.use(Vuex) const obj = { title: 'test-title' } wrapper = mount(Component, { // mockで$storeを設定 mocks: { $store: { getters: { ...mapGetters(['path/path', { data: () => obj } as any]), }, }, } ) }) afterEach(() => { if (wrapper) { wrapper.destroy() } }) it('should have head title', () => { localVue.use(VueMeta, { keyName: 'head' }) expect(wrapper.vm.$metaInfo.title).toBe('test-title') })

上記のような形でエラーは解消できました!ただ、テストの結果が

Expected: "test-title" │ Received: "undefined"

となってしまいます。こちらわかる方いましたらご回答お願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

ユニットテスト

ユニットテストは、システムのテスト手法の一つで、個々のモジュールを対象としたテストの事を指します。対象のモジュールが要求や性能を満たしているか確認する為に実行します。