无法读取未定义的属性“ getters”-用Jest进行VueJS单元测试

Question

我正在为VueJS组件编写单元测试，并已查阅Vue Test Utils Common Tips的“ Applying Global Plugins and Mixins”部分。我有一个依赖于Vuex商店的组件，因此出于我的目的将该示例放在该部分下是很有意义的。

这是该组件的特定.spec.js文件的代码：

import { createLocalVue, mount } from '@vue/test-utils'
import AppFooter from '@/components/AppFooter/AppFooter'
import store from '@/store'

describe('AppFooter component', () => {
    const localVue = createLocalVue()
    localVue.use(store)

    it('AppFooter should have header slot', () => {
        const AppFooterComponent = mount(AppFooter, {
            localVue
        })

        /* TODO: Replace with a more appropriate assertion */
        expect(true).toEqual(true)
    })
})

这对上面链接中提供的示例非常忠实。但是，运行测试套件时收到的错误如下：

我应该以不同的方式安装Vue商店吗？

Answer 1

要详细说明我的评论，我相信它应该类似于以下内容，您可以在其中通过mount（）调用传递存储。

import { createLocalVue, mount } from '@vue/test-utils'
import AppFooter from '@/components/AppFooter/AppFooter'
import Vuex from 'vuex'
import store from '@/store' //you could also mock this out.

describe('AppFooter component', () => {
    const localVue = createLocalVue()
    localVue.use(Vuex)

    it('AppFooter should have header slot', () => {
        const AppFooterComponent = mount(AppFooter, {
            store,
            localVue
        })

        /* TODO: Replace with a more appropriate assertion */
        expect(true).toEqual(true)
    })
})

Answer 2

我相信你的组件中有这样的东西。$store.getters[someBeautifulGetterName]。为了让您的测试安装组件，您需要初始化存储并将其传递到您的测试组件中。请记住，这将是一个全新的 Vuex 实例。这是代码

import { shallowMount } from '@vue/test-utils'
import Vue from 'vue'
import Vuex from 'vuex'
import Tags from '@/components/Tags'
    
Vue.use(Vuex)
Vue.prototype.$store = new Vuex.Store()

const factory = (propsData) => {
  return shallowMount(Tags, {
    propsData: {
      ...propsData
    }
  })
}

describe('Tags', () => {  
  it("render tags with passed data", () => {
    const wrapper = factory({ loading: true })
    // TODO:
  })
})