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 anf store.js文件 store.js在App.vue中导入

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吸气剂。您正在定义一个返回shoppinglists的{{1}} getter。

您需要将'getLists'行更改为：

mapGetters

或者将getter的名称更改为...mapGetters(['shoppinglists'])：

getLists

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

Answer 2

@thanksd把我放在轨道上......看我的评论

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

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

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

2 个答案: