[Vuejs]-Vuejs Unit Test – Backing Mocks with Tests

What we ended up doing is using the actual store. Because the store state is just an object we figured it was acceptable.

We also use the store getters, actions and mutations as templates for jasmine spyies.

// Vuex needs polyfill
import { polyfill } from 'es6-promise';
polyfill();
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

import test from 'app/components/test.vue';
import module from 'app/store/modules/module';


describe('Spec for Test.vue', () => {
    var props;
    var state;
    var actions;
    var mutations;
    var getters;
    var store;

    beforeEach( () => {
        jasmine.addMatchers(customMatchers);
        props = { };

        // Don't change the modules
        state = Object.assign({}, module.state);
        actions = Object.assign({}, module.actions);
        mutations = Object.assign({}, module.mutations);
        getters = Object.assign({}, module.getters);

        // Add require global actions, mutations, and getters here...
        actions.globalActionHere = 'anything'; // this turns into a spy

        // Update State with required fields
        state.defaults = { id: 1 }   // default expected when the component loads

        // Replace modules copies with mocks
        actions = jasmine.createSpyObj('actions', actions);
        mutations = jasmine.createSpyObj('mutations', mutations);
        getters = jasmine.createSpyObj('getters', getters);

        store = new Vuex.Store( { state: { module: state }, getters, actions, mutations } );
    } );

    it('should have a name of test', () => {
        const Constructor = Vue.extend(thing);
        const component new Constructor({ store, props }).$mount();

        expect(component.$options.name).toBe('test');
    });

});

Note the part

jasmine.createSpyObj('actions', actions);

Jasmine spies will use the module to create spyies for each of the methods, which is very useful.