Vue.js Vuex 单元测试失败，[vuex] 未知 getter：

Question

我正在测试我的 App.vue ，但我在 getter 上遇到了 Vuex 错误... 我想这与定义错误的 getters 属性有关，但我不知道如何解决它.. 欢迎反馈

Console.log

    ERROR LOG: '[vuex] unknown getter: getLists'
      App.vue
        ✗ calls store action addShoppingList when a click event is fired from the plus-sign icon
            AssertionError: expected false to equal true
                at Context.<anonymous> (webpack:///test/unit/specs/App.spec.js:33:50 <- index.js:24490:51)

App.spec.js

    import App from '@/App'
    import Vue from 'vue'
    import Vuex from 'vuex'
    import sinon from 'sinon'
    import { mount } from 'avoriaz'
    Vue.use(Vuex)

    describe('App.vue', () => {
      let actions
      let getters
      let store

      beforeEach(() => {
        actions = {
          addShoppingList: sinon.stub(),
          populateShoppingLists: sinon.stub()
        }
        getters = {
          shoppinglists: () => 'getLists'
        }
        store = new Vuex.Store({
          state: {},
          actions,
          getters
        })
      })

      it('calls store action addShoppingList when a click event is fired from the plus-sign icon', (done) => {
        const wrapper = mount(App, { store })
        wrapper.find('a')[0].trigger('click')
        wrapper.vm.$nextTick(() => {
          expect(actions.createShoppingList.calledOnce).to.equal(true)
          done()
        })
      })

App.vue

    <template>
      <div id="app" class="container">
        <ul class="nav nav-tabs" role="tablist">
          <li :class="index===shoppinglists.length-1 ? 'active' : ''" v-for="(list, index) in shoppinglists"  :key="list.id"  role="presentation">
            <shopping-list-title-component :id="list.id" :title="list.title"></shopping-list-title-component>
          </li>
          <li>
            <a href="#" @click="addShoppingList">
              <i class="glyphicon glyphicon-plus-sign"></i>
            </a>
          </li>
        </ul>
        <div class="tab-content">
          <div :class="index===shoppinglists.length-1 ? 'active' : ''" v-for="(list, index) in shoppinglists"  :key="list.id"  class="tab-pane" role="tabpanel" :id="list.id">
            <shopping-list-component :id="list.id" :title="list.title" :items="list.items"></shopping-list-component>
          </div>
        </div>
      </div>
    </template>

    <script>
      import ShoppingListComponent from './components/ShoppingListComponent'
      import ShoppingListTitleComponent from './components/ShoppingListTitleComponent'
      import store from './vuex/store'
      import { mapGetters, mapActions } from 'vuex'
      import _ from 'underscore'

      export default {
        components: {
          ShoppingListComponent,
          ShoppingListTitleComponent
        },
        computed: {
          ...mapGetters({ shoppinglists: 'getLists' })
        },
        methods: _.extend({}, mapActions(['populateShoppingLists', 'createShoppingList']), {
          addShoppingList () {
            let list = { title: 'New Shopping List', items: [] }
            this.createShoppingList(list)
          }
        }),
        store,
        mounted: function () {
          this.$nextTick(function () {
            this.populateShoppingLists()
          })
        }
      }
    </script>

更新

这是我的 getters.js 和 store.js 文件 在 App.vue 中导入 store.js

store.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    import getters from './getters' // import getters !
    import actions from './actions'
    import mutations from './mutations'

    Vue.use(Vuex)

    const state = {
      shoppinglists: []
    }

    export default new Vuex.Store({
      state,
      mutations,
      getters,
      actions
    })

getters.js

    import _ from 'underscore'

    export default {
      getLists: state => state.shoppinglists,
      getListById: (state, id) => {
        return _.findWhere(state.shoppinglists, { id: id })
      }
    }

Answer 1

您没有在商店中定义 getLists getter。您正在定义一个返回 'getLists' 的 shoppinglists getter。

您需要将 mapGetters 行更改为：

...mapGetters(['shoppinglists'])

或者把getter的名字改成getLists：

getters = {
  getLists: () => 'getLists'
}

（虽然我不确定你是否真的打算在那个 getter 中返回一个字符串值）

Answer 2

@thanksd 让我走上正轨……看我的评论

所以我需要在我的 Vur.spec.js 中定义 getter 如下

    getters = {
      getLists: () => {
        // console.log('WE ARE S TEST')
        state => state.shoppinglists
      }
    }