vuex-tester

mock the vuex environment to run your commit and dispatch without any extra adjustment, test as closer as possible to your product environment.

NO NEED to split your actions and mutations

full flow test is best test.

1import VuexTester from 'vuex-tester';
2
3const store = {
4    namespace: true,
5    state: {
6      abc: 1
7    },
8    mutations: {
9      SET(state, payload) {
10        state.abc = payload;
11      },
12      PLUS(state, payload) {
13        state.abc = state.abc + payload;
14      },
15    },
16    actions: {
17      _plus(context, params) {
18        console.log("context -> ", context);
19        context.commit("PLUS", params);
20      }
21    },
22    getters: {
23      getStatePlus(state, getters, rootState, rootGetters) {
24        console.log(
25          "getters getStatePlus-> ",
26          state,
27          rootState,
28          Object.getOwnPropertyNames(getters),
29          Object.getOwnPropertyNames(rootGetters)
30        );
31        return state.abc + 1;
32      }
33    },
34    modules: {
35      sub: {
36        namespace: true,
37        state: {
38          cbd: 100
39        },
40        mutations: {
41          SET(state, payload) {
42            state.cbd = payload;
43          },
44          MINUS(state, payload) {
45            console.log(" MINUS arg-> ", arguments);
46            state.cbd = state.cbd - payload;
47            console.log(" MINUS result-> ", state.cbd);
48          }
49        },
50        actions: {
51          _minus(context, params) {
52            console.log("context -> ", context);
53            context.commit("MINUS", params);
54          }
55        },
56        getters: {
57          getStateMinus(state, getters, rootState, rootGetters) {
58            console.log(
59              "getters getStateMinus-> ",
60              state,
61              rootState,
62              Object.getOwnPropertyNames(getters),
63              Object.getOwnPropertyNames(rootGetters)
64            );
65            return state.cbd - 1;
66          }
67        },
68        modules: {
69          subTie: {
70            namespace: true,
71            state: {
72              xyz: 55
73            },
74            mutations: {
75              SET(state, payload) {
76                state.xyz = payload;
77              },
78              MULTIPLY(state, payload) {
79                state.xyz = state.xyz * payload;
80              }
81            },
82            actions: {
83              _multiply(context, params) {
84                console.log("context -> ", context);
85                context.commit("MULTIPLY", params);
86              }
87            },
88            getters: {
89              getStateMultiplyDouble(state) {
90                console.log("getters getStateMultiplyDouble-> ", arguments);
91                return state.xyz * 2;
92              }
93            }
94          }
95        }
96      }
97    }
98};
99
100const { state, commit, dispatch } = new VuexTester(store).update();
101// if you just want to test the part of subTie, just like this;
102// const { state, commit, dispatch } = new VuexTester(store.modules.sub.modules.subTie, 'sub/subTie').update();
103
104describe("test state", async () => {
105  it("state abc", async function() {
106    expect(state.abc).eql(1);
107  });
108});
109describe("test rootState", async () => {
110  it("rootState abc", async function() {
111    expect(rootState.abc).eql(1);
112  });
113});
114describe("test mutations", async () => {
115  it("mutations SET", async function() {
116    commit('SET', 100);
117    expect(state.abc).eql(100);
118  });
119  it("mutations PLUS", async function() {
120    commit('SET', 100);
121    commit('PLUS', 10);
122    expect(state.abc).eql(110);
123  });
124});
125describe("test actions", async () => {
126  it("actions _plus", async function() {
127    commit('SET', 100);
128    dispatch('_plus', 9);
129    expect(state.abc).eql(109);
130  });
131});
132describe("test getters", async () => {
133  it("getters getStatePlus", async function() {
134    commit('SET', 100);
135    expect(getters.getStatePlus).eql(101);
136  });
137});
138describe("test rootGetters", async () => {
139  it("rootGetters getStatePlus", async function() {
140    commit('SET', 100);
141    expect(rootGetters.getStatePlus).eql(101);
142  });
143});