I have been working on developing a new Vue component that utilizes a namespaced Vuex getter to retrieve a list of column names. The actual component is functioning properly and runs without any issues.
During the Mocha unit testing phase, I set up a mocked getter that should return a series of strings known as "allColumns". However, when I execute the unit tests and initiate ShallowMount, the component's methods attempt to access this.allColumns during initialization, but it consistently returns as undefined. Despite being able to see the desired value in this.$store.getters.allColumns, it does not get mapped to this.allColumns as it typically would when the page is viewed in a browser.
While there are numerous resources available regarding mocking getters in tests and utilizing mapGetters with a namespace, I have yet to come across any documentation specifically addressing namespaced getters in a Mocha test.
test.spec.js
let propsData;
let getters;
let store;
beforeEach(() => {
debugger;
propsData = {
players: samplePlayerObject,
metadata: sampleMetadataObject
};
getters = {
allColumns: () => ["playerid","last","first","birthday","height"]
}
store = new Vuex.Store({
getters
});
})
it('initializes the component', () => {
const wrapper = shallowMount(PlayerFilterTable, { propsData, localVue, store });
});
vue component
<template>
<div class="player-filter-table">
<table>
<tr>
<th v-for="(key, index) in GetColumns()"
v-bind:id="'header-' + key"
v-bind:key="index"
@click="HeaderClick(key)"
>...</th>
</tr>
</table>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters({
allColumns: 'playerFilter/allColumns'
})
},
GetColumns() {
// When running in browser, this.allColumns is defined, but it becomes undefined when loaded from a Mocha test
return this.allColumns.filter(column => [*some filter criteria*]);
}
</script>
Upon executing shallowMount in test.spec.js, I anticipate the component to load successfully and proceed to run my tests. Instead, an error is prompted stating TypeError: Cannot read property 'filter' of undefined due to the fact that this.allColumns remains undefined.