농담으로 Vue 장치 테스트 vuex 저장소 작업

농담으로 Vue 장치 테스트 vuex 저장소 작업

Vue 버전 2.6.11, Vuex 버전 3.4.0을 사용하고 있습니다.vuex 스토어(timeTravel)에 지정된 인덱스에서 다른 인덱스로 배열 요소를 이동하는 기능이 있습니다.이 기능을 작동시키는 버튼이 있는 컴포넌트가 있습니다.저는 유닛 테스트에 익숙하지 않아서 혼란스러워요.

액션 리스트vue 성분

// other codes

<v-btn color="primary" dark @click="timeTravel({from:action.from_index,to:action.to_index,action_list_index:index})">
  <v-icon left dark>
   mdi-clock-outline
  </v-icon>
   Submit
</v-btn>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "ActionsList",
  computed: mapGetters(["commitedActionsList"]),
  methods: {
    ...mapActions(["timeTravel"]),
  },
};
</script>

Vuex 스토어

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    posts: [],
    commitedActions: [],
  },
  getters: {
    postsList: (state) => state.posts,
    commitedActionsList: (state) => state.commitedActions,
  },
  mutations: {
    setPosts: (state, posts) => (state.posts = posts),
    setCommitedActions: (state, commitedActions) =>
      state.commitedActions.push(commitedActions),
  },
  actions: {
    async fetchPosts({ commit }) {
      const response = await axios.get(
        "https://jsonplaceholder.typicode.com/posts/?_limit=5"
      );
      commit("setPosts", response.data);
    },
    timeTravel({ commit, getters }, data) {
      var from = data["from"];
      var to = data["to"];
      var action_list_index = data["action_list_index"];
      console.log(from,to,action_list_index);
      var posts_copy = getters.postsList;

      var f = posts_copy.splice(from, 1)[0]; // remove `from` item and store it
      posts_copy.splice(to, 0, f); // insert stored item into position `to`
      commit("setPosts", posts_copy);
      
      this.state.commitedActions.splice(action_list_index,1)

    },
  },
  modules: {},
});

그래서 나는 이 timeTravel 함수에 대한 단위 테스트를 농담으로 쓰고 싶다.몇 가지 튜토리얼을 찾았는데 헷갈리네요.지금까지 제가 생각해낸 것은 이것입니다.

import Vuetify from 'vuetify';
import Vuex from 'vuex'
import { createLocalVue ,shallowMount } from '@vue/test-utils'
import ActionsList from '@/components/ActionsList.vue';

let localVue = createLocalVue();

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

    beforeEach(()=>{
        localVue.use(Vuex)
        localVue.use(Vuetify)
        state = {posts:[]}

        getters = {
            postsList: (state) => state.posts,
        }

        actions = {
            timeTravel: jest.fn()
        }

        store = new Vuex.Store({
            state,
            getters,
            actions
        })
    })

    it('dispatches timeTravel', ()=>{
        const wrapper = shallowMount({
            localVue,
            store
        })

        wrapper.find('v-btn').trigger('click')

        expect()
    })
})

timeTravel 함수가 주어진 인덱스에서 다른 인덱스로 요소를 이동하는지 테스트하고 싶습니다.그래서 누군가 내가 이 단위 시험을 쓸 수 있도록 나를 올바른 방향으로 안내해주면 좋겠다.

언급URL : https://stackoverflow.com/questions/64256875/vue-unit-testing-vuex-store-action-with-jest