Почему VueX сохраняет состояние в нескольких модульных тестах?

Я пишу модульные тесты для модуля разбивки на страницы, и у него есть простой модуль хранилища VueX.

Для тестов я использую Vue.js 2.5 и Mocha / Chai / Sinon. Настройка выполняется с помощью Vue CLI 3.

Проблема в том, что когда currentPage увеличивается в хранилище в одном модульном тесте, это состояние сохраняется в следующем тесте, даже когда я пытаюсь создать новое хранилище.

Я попытался вернуть новый модуль разбивки на страницы, используя функцию, которая возвращает Object.assign() свежую копию, но это не сработало. Я оставил это в коде, как показано в спецификации ниже.

store / pagination.js

const state = {
  currentPage: 0
}

export const getters = {
  currentPage: state => {
    return state.currentPage
  }
}

export const actions = {

  nextPage ({ commit, state }) {
    commit('setCurrentPage', state.currentPage + 1)
  }
}

export const mutations = {
  setCurrentPage (state, page) {
    state.currentPage = page
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

Pagination.spec.js

function getPaginationStore () {
  return Object.assign({}, pagination)
}

describe('Paginate.vue', () => {
  let localVue
  let wrapper
  let store

  beforeEach(() => {
    localVue = createLocalVue()
    localVue.use(Vuex)

    store = new Vuex.Store({
      modules: {
        pagination: getPaginationStore()
      }
    })

    wrapper = shallowMount(Pagination, {
      localVue,
      propsData: {
        items: [],
        size: 24
      },
      store
    })
  })

  afterEach(() => {
    store = null
  })

  it('state should be 0', () => {
    expect(wrapper.vm.pageNumber).to.equal(0)
    wrapper.vm.$store.dispatch('pagination/nextPage')
    expect(wrapper.vm.pageNumber).to.equal(1)
  })

  it('state should be 0 again but is 1', () => {
    // THIS TEST FAILS. IT IS ACTUALLY 1
    expect(wrapper.vm.pageNumber).to.equal(0)
  })
})

person Daniel Twigg    schedule 06.02.2019    source источник


Ответы (1)


Решением было использовать функцию для состояния в модуле, а не простой старый объект javascript. Вот мой новый код состояния магазина:

export const state = () => {
  return {
    currentPage: 0
  }
}

Ответ предоставил @SumNeuron с канала Vue Discord.

person Daniel Twigg    schedule 06.02.2019