Тестирование магазина VueX - PullRequest
Новая
       27

Тестирование магазина VueX

2 голосов
/ 05 марта 2020

Я пытаюсь протестировать разные части магазина VueX. Я храню мутации, геттеры и другое в одном файле (index. js), но почему-то он не работает при импорте этого файла в тестовый файл. Вот мой VueX: Vue .use (Vuex);

Index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);


export default new Vuex.Store({
  state: {
    pickedDates:[]
  },
  mutations: {
    mutatePickedDates: (state, payload) => {
      state.pickedDates = payload;
    },
})

Сейчас в Store.spec.js Я хочу проверить это: 

import storeConfig from '@/store/index.js'

const store = storeConfig


test('check if state is working', () =>{
    const state = {
        pickedDates: []
    }
    const dates = ['1995-01-01', '1995-01-01']
    store.mutations.mutatePickedDates(state, {dates})
    expect(state.pickedDates).toBe(dates)

})

Но я получаю ошибку: TypeError: Cannot read property 'mutatePickedDates' of undefined при запуске теста.

1 Ответ

2 голосов
/ 05 марта 2020

Существует два подхода к тестированию vuex. Первый - это юнит-тестирование действий, мутаций и геттеров. Во-вторых, это непосредственное тестирование рабочего хранилища.

Мутации модульного тестирования

Если вы хотите проверить мутации хранилищ, изолированных от компонентов, я бы порекомендовал экспортировать их. 

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const mutations = {
  mutatePickedDates: (state, payload) => {
    state.pickedDates = payload;
  }
};

export default new Vuex.Store({
  state: {
    pickedDates:[]
  },
  mutations: mutations
})

Тогда Вы можете импортировать и тестировать мутации напрямую. 

import { mutations } from '@/store/index.js'

test('check if state is working', () =>{
    const state = {
        pickedDates: []
    }
    const dates = ['1995-01-01', '1995-01-01']
    mutations.mutatePickedDates(state, dates)
    expect(state.pickedDates.length).toBe(2)
})

Использовать работающий Vuex Store 

import { createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import store from '@/store/index.js'

test('check if state is working', () =>{
    // initial state
    const state = {
        pickedDates: []
    }

    const dates = ['1995-01-01', '1995-01-01']

    // create local instance and vuex store
    const localVue = createLocalVue()
    localVue.use(Vuex)

    // commit mutation
    store.commit('mutatePickedDates', dates)

    expect(store.pickedDates.length).toBe(2)
})
...