Тестирование геттера, который вызывает другой геттер, без насмешек - или как смонтировать Vuex в тестах?

Question

Я не понимаю чего-то фундаментального, используя Vuex: для магазина, который прекрасно работает в приложении, при запуске тестов из-за внедрения зависимостей ни один из моих геттеров, которые вызывают другие геттеры, не работает.

См. следующее хранилище с двумя геттерами:

const state = {
  items: {},
}

const getters = {
  item: (state) => (itemIndex) => {
    return state.items[itemIndex]
  },
  reducedItem: (state, getters) => (itemIndex) => {
    return getters.item(itemIndex).reduce((acc, subitem) => {
        return acc + ';' + subitem.text
    }, '')
  }
}

const mutations = {
}

const actions = {
}

export default {
  state,
  getters,
  mutations,
  actions
}

и пример теста:

import DemoStore from '@/store/modules/DemoStore'
import { expect } from 'chai'
const getters = DemoStore.getters

describe('store/DemoStore', () => {
  it('reducedItem reduces', () => {
    var state = {
      items: [
        [{text: 'a'}, {text: 'b'}, {text: 'c'}],
      ]
    }

    let result = getters.reducedItem(state, getters)(0)
    expect(result).to.equal('abc')
  })
})

При запуске теста, reducedItem геттер вызывает getters.item, который вместо вызова getters.item(state) и возвращает правильное значение, вызывает простую функцию getters.item, которая возвращает функцию. Поэтому код в тестовой среде просто не работает.

Я понимаю, что Vuex рекомендует использовать насмешливые методы получения, но давайте не будем всерьез рассматривать насмешки.

Есть ли способ «смонтировать» хранилище vuex в тестах, чтобы использовать его точно так же, как в приложении?

Answer 1

DemoStore - объект параметров, предоставляемый конструктору Vuex. Vuex может быть создан как:

let store = new Vuex.Store(DemoStore);

Предполагается, что геттеры доступны как store.getters и ведут себя так, как ожидается в магазине Vuex.