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

Question

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"

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

Answer 1

import Component from '@/pages/component'
import { createLocalVue, mount } from '@vue/test-utils'
import VueMeta from 'vue-meta'

describe('test', () => {
  const localVue = createLocalVue()

  let wrapper: any

  beforeEach(() => {
    localVue.use(Vuex)

    wrapper = mount(Component, {store})
    const title = 'test-title'
    const store = new Vuex.Store({
      getters: {
        'path/path': jest.fn(() => ({
          title,
        })),
      },
    })

  afterEach(() => {
    if (wrapper) {
      wrapper.destroy()
    }
  })

  it('should have head title', () => {
    localVue.use(VueMeta, { keyName: 'head' })
    expect(wrapper.vm.$metaInfo.title).toBe('test-title')
  })

以上のような感じでうまくいきました！