javascript - Mocking Vuex module action in component unit test - Stack Overflow

I'm currently trying to mock an action from a store's module. I can't seem to properly stub it, as I continue to get a message in my unit tests that says:

[vuex] unknown action type: moduleA/filterData

Here is a simplified version of the ponent under test:

Item.vue

<template>
    <li class="list-item"
    @click="toggleActive()">
        {{ itemName }}
    </li>
</template>

<script>
import store from '../store'

export default {
    name: 'item',
    props: {
        itemName: {
            type: String
        }
    },
    data () {
        return {
            store,
            isActive: false
        }
    },

    methods: {
        toggleActive () {
            this.isActive = !this.isActive;
            this.$store.dispatch('moduleA/filterData', { name: itemName } );
        }
    }

}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './modules/moduleA'

Vue.use(Vuex)



const store = new Vuex.Store({
    modules: {
        moduleA
    }
});

export default store;

moduleA.js

/* imports */

const state = {
    /* state */
}

const mutations = {
    /* ... */
}

const actions = {

    filterData({ state, mit }, payload) {
        /* filter data and mit mutations */
    }
}

const getters = {
    /* getters */
}

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

Item.spec.js

import Vue from 'vue'
import { mount } from '@vue/test-utils'
import { expect } from 'chai'
import sinon from 'sinon'
import Item from '../src/ponents/Item.vue'
import Vuex from 'vuex'

Vue.use(Vuex);

describe('Item.vue', () => {
    let ponentProps = {};
    let wrapper;
    let actions;
    let store;
    beforeEach(() => {
        let name = 'Item Name';
        // mock vuex action on click
        actions = {
            filterData: sinon.stub()
        }

        let moduleA = {
            state: {},
            actions
        }

        store = new Vuex.Store({
            modules: {
                moduleA
            }
        });


        ponentProps.itemName = name;
        wrapper = mount(Item, {
            store: store,
            propsData: ponentProps
        });
    })

    it('Has a root element of list-item', () => {
        expect(wrapper.is('.list-item')).to.equal(true);
    })

    it('Item getting prop name', () => {
        expect(wrapper.text()).to.equal('Item Name');
    })

    it('Item is not active on load', () => {
        expect(wrapper.vm.$data.isActive).to.equal(false);
    })

    it('Item is active after click', () => {
        wrapper.trigger('click');
        expect(wrapper.vm.$data.isActive).to.equal(true);

    })

    it('Item is not active after two clicks', () => {
        wrapper.trigger('click');
        wrapper.trigger('click');
        expect(wrapper.vm.$data.isActive).to.equal(false);
    })
})

This isn't causing my tests to fail, but I've been unable to find out how to properly mock/stub module actions from Vuex. Any help is appreciated.

I'm currently trying to mock an action from a store's module. I can't seem to properly stub it, as I continue to get a message in my unit tests that says:

[vuex] unknown action type: moduleA/filterData

Here is a simplified version of the ponent under test:

Item.vue

<template>
    <li class="list-item"
    @click="toggleActive()">
        {{ itemName }}
    </li>
</template>

<script>
import store from '../store'

export default {
    name: 'item',
    props: {
        itemName: {
            type: String
        }
    },
    data () {
        return {
            store,
            isActive: false
        }
    },

    methods: {
        toggleActive () {
            this.isActive = !this.isActive;
            this.$store.dispatch('moduleA/filterData', { name: itemName } );
        }
    }

}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './modules/moduleA'

Vue.use(Vuex)



const store = new Vuex.Store({
    modules: {
        moduleA
    }
});

export default store;

moduleA.js

/* imports */

const state = {
    /* state */
}

const mutations = {
    /* ... */
}

const actions = {

    filterData({ state, mit }, payload) {
        /* filter data and mit mutations */
    }
}

const getters = {
    /* getters */
}

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

Item.spec.js

import Vue from 'vue'
import { mount } from '@vue/test-utils'
import { expect } from 'chai'
import sinon from 'sinon'
import Item from '../src/ponents/Item.vue'
import Vuex from 'vuex'

Vue.use(Vuex);

describe('Item.vue', () => {
    let ponentProps = {};
    let wrapper;
    let actions;
    let store;
    beforeEach(() => {
        let name = 'Item Name';
        // mock vuex action on click
        actions = {
            filterData: sinon.stub()
        }

        let moduleA = {
            state: {},
            actions
        }

        store = new Vuex.Store({
            modules: {
                moduleA
            }
        });


        ponentProps.itemName = name;
        wrapper = mount(Item, {
            store: store,
            propsData: ponentProps
        });
    })

    it('Has a root element of list-item', () => {
        expect(wrapper.is('.list-item')).to.equal(true);
    })

    it('Item getting prop name', () => {
        expect(wrapper.text()).to.equal('Item Name');
    })

    it('Item is not active on load', () => {
        expect(wrapper.vm.$data.isActive).to.equal(false);
    })

    it('Item is active after click', () => {
        wrapper.trigger('click');
        expect(wrapper.vm.$data.isActive).to.equal(true);

    })

    it('Item is not active after two clicks', () => {
        wrapper.trigger('click');
        wrapper.trigger('click');
        expect(wrapper.vm.$data.isActive).to.equal(false);
    })
})

This isn't causing my tests to fail, but I've been unable to find out how to properly mock/stub module actions from Vuex. Any help is appreciated.

• javascript
• unit-testing
• vue.js
• sinon
• vuex

Share Improve this question Follow asked Jul 12, 2018 at 19:39 imczimcz 31233 silver badges1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

So I've looked into this, and it turns out that I wasn't defining that my store within my test was namespaced, hence it wasn't recognizing my action:

beforeEach(() => {
    let name = 'Item Name';
    // mock vuex action on click
    actions = {
        filterData: sinon.stub()
    }

    let moduleA = {
        namespaced: true,
        state: {},
        actions
    }

    store = new Vuex.Store({
        modules: {
            moduleA
        }
    });


    ponentProps.itemName = name;
    wrapper = mount(Item, {
        store: store,
        propsData: ponentProps
    });
})

After including this my errors went away.