Question

我正在使用@ vue-test-utils进行vuejs单元测试。

我的商店看起来像：

export default {
 root: true,
 state: {
    batches: []
 },
 getters: {
 getBatches: state => {
    return state.batches
  }
 }
}

组件看起来像这样：

<template>
  <div>
   <p>Batches Work!</p>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";

  export default {
    computed: {
      ...mapGetters({
         getBatches: "getBatches"
      })
   }
  }; 
 </script>

测试文件如下：

 import { shallowMount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import Vuetify from 'vuetify'
 import Vue from 'vue'
 import Batches from '../../../src/pages/Batches'

 const $route = {
    path: '/batches'
 }

 const localVue = createLocalVue()
 localVue.use(Vuex)
 Vue.use(Vuetify)

  describe('Batches', () => {
   let getters, store

   beforeEach(() => {
    getters = {
     getBatches: () => jest.fn()
    },
    store = new Vuex.Store({
        getters
    })
 })

 const wrapper = shallowMount(Batches, {
 localVue,
 mocks: {
    $route
   },
   store
 })

 it('Batches is a vue component', () => {
    expect(wrapper.isVueInstance()).toBeTruthy()
 })

})

当我运行测试时，它会抛出以下内容：

 FAIL  test/unit/pages/batches-test.spec.js
 Batches
   ✕ encountered a declaration exception (2ms)

 ● Batches › encountered a declaration exception

 TypeError: Cannot read property 'getters' of undefined

 at VueComponent.mappedGetter (node_modules/vuex/dist/vuex.common.js:898:73)
 at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4459:25)
 at Watcher.evaluate (node_modules/vue/dist/vue.runtime.common.dev.js:4564:21)
 at Proxy.computedGetter (node_modules/vue/dist/vue.runtime.common.dev.js:4813:17)
 at Proxy.render (src/pages/Batches.vue:772:20)
 at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.dev.js:3532:22)
 at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4048:21)
 at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4459:25)
 at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4448:12)
 at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4055:3)
 at VueComponent.Object.<anonymous>.Vue.$mount 
 (node_modules/vue/dist/vue.runtime.common.dev.js:8386:10)
  at init (node_modules/vue/dist/vue.runtime.common.dev.js:3112:13)
  at createComponent (node_modules/vue/dist/vue.runtime.common.dev.js:5952:9)
  at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:5899:9)
  at VueComponent.patch [as __patch__] 
 (node_modules/vue/dist/vue.runtime.common.dev.js:6449:7)
 at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3927:19)
 at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4048:10)
 at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4459:25)
 at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4448:12)
 at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4055:3)
 at VueComponent.Object.<anonymous>.Vue.$mount 
 (node_modules/vue/dist/vue.runtime.common.dev.js:8386:10)
 at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:8649:21)
 at shallowMount (node_modules/@vue/test-utils/dist/vue-test-utils.js:8677:10)
 at Suite.Object.<anonymous>.describe (test/unit/pages/batches-test.spec.js:49:21)
 at Object.describe (test/unit/pages/batches-test.spec.js:18:1)

 console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
 [Vue warn]: Error in render: "TypeError: Cannot read property 'getters' of undefined"

我已经尝试了所有方法来使我的测试与vuex资源一起使用，但是我陷入了困境。我不明白我要去哪里错了。请帮帮我！

Answer 1

在创建测试时，必须在测试文件中使用与主文件中相同的吸气剂

Answer 2

您正在尝试同时使用localVue和Vue，这将不起作用，还有依赖于Vuetify should not use localVue的组件

鉴于此，规范可以重写为：

import { shallowMount } from '@vue/test-utils';
import Vuex from 'vuex';
import Vuetify from 'vuetify';
import Vue from 'vue';
import Batches from '../../../src/pages/Batches';

Vue.use(Vuex);
Vue.use(Vuetify);

describe('Batches', () => {
  it('Batches is a vue component', () => {
    const store = new Vuex.Store({
      modules: {
        module: {
          getters: { getBatches: () => jest.fn() },
        },
      },
    });

    const $route = {
      path: '/batches',
    };

    const wrapper = shallowMount(Batches, {
      Vue,
      mocks: {
        $route,
      },
      store,
    });

    expect(wrapper.isVueInstance()).toBeTruthy();
  });
});

TypeError：无法读取未定义@ vue / test-utils的属性“ getters”

2 个答案: