Firstly, I am using quasar framework for developing my app.
So, I am testing a component in which I am accessing ‘getters’ from Vuex store. The getters are inside a module as follows: -
export default store((/* { ssrContext } */) => {
const Store = createStore({
state() {
return {};
},
mutations: {},
actions: {},
getters: {},
modules: {
location: locationModule,
},
// enable strict mode (adds overhead!)
// for dev mode and --debug builds only
strict: process.env.DEBUGGING,
});
return Store;
});
The ‘locationModule’ is imported from the location.js file: -
const locationModule = {
namespaced: true,
state() {
return {
location: null,
error: null,
maxSpeed: 0,
hasPermission: false,
};
},
getters: {
currentSpeed({ location, error }) {
// Some code
},
currentAltitude({ location, error }) {
// Some code
},
getLocationAccuracy({ location }) {
// Some code
},
},
};
export default locationModule;
And the getters are used in the component named Cards.vue as follows: -
<script>
import { mapGetters } from "vuex";
export default {
name: "HomeCards",
computed: {
...mapGetters("location", ["currentAltitude", "currentSpeed"]),
},
};
</script>
<template>
<p>{{ currentSpeed }}<span class="unit">km/h</span></p>
<p>{{ currentAltitude }}<span class="unit">m</span></p>
</template>
Now, I’ve made a test file named Cards.spec.js and inside it I am testing the component like following: -
import { describe, expect, it } from "@jest/globals";
import { mount, shallowMount, RouterLinkStub } from "@vue/test-utils";
import Cards from "../../../../src/components/Home/Body/Cards.vue";
describe("Cards", () => {
let $store;
beforeEach(() => {
$store = {
modules: {
location: {
namespaced: true,
state: {
location: null,
error: null,
maxSpeed: 0,
hasPermission: false,
},
getters: {
currentSpeed: () => jest.fn(),
currentAltitude: () => jest.fn(),
getLocationAccuracy: () => jest.fn(),
},
},
},
};
});
it("Should render a value", async () => {
const wrapper = mount(Cards, {
global: {
mocks: {
$store,
$t: (msg) => msg,
},
stubs: {
RouterLink: RouterLinkStub,
QImg: true,
},
},
});
const value = wrapper.find(".value");
expect(value.text()).toBeTruthy();
});
});
I am testing using a mock store for getters used in the component.
However, I am getting the following error: -
Cards › Should render a value
TypeError: Cannot read property 'location/' of undefined
at getModuleByNamespace (node_modules/vuex/dist/vuex.cjs.js:1351:42)
at Proxy.mappedGetter (node_modules/vuex/dist/vuex.cjs.js:1238:25)
at ReactiveEffect.run (node_modules/vue/node_modules/@vue/reactivity/dist/reactivity.cjs.js:164:29)
at ComputedRefImpl.get value [as value] (node_modules/vue/node_modules/@vue/reactivity/dist/reactivity.cjs.js:1075:39)
at Object.get [as currentSpeed] (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2142:30)
at Object.get (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5915:27)
at Proxy.render (src/components/Home/Body/Cards.vue:120:155)
at renderComponentRoot (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:465:44)
at ReactiveEffect.componentUpdateFn [as fn] (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4174:57)
at ReactiveEffect.run (node_modules/vue/node_modules/@vue/reactivity/dist/reactivity.cjs.js:164:29)
at setupRenderEffect (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4300:9)
at mountComponent (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4083:9)
at processComponent (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4041:17)
at patch (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3647:21)
at ReactiveEffect.componentUpdateFn [as fn] (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4181:21)
at ReactiveEffect.run (node_modules/vue/node_modules/@vue/reactivity/dist/reactivity.cjs.js:164:29)
at setupRenderEffect (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4300:9)
at mountComponent (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4083:9)
at processComponent (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4041:17)
at patch (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3647:21)
at render (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4785:13)
at mount (node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3166:25)
at Object.app.mount (node_modules/vue/node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1523:23)
at mount (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7860:18)
at Object.<anonymous> (test/jest/__tests__/Home/Cards.spec.js:34:21)
Note that I’ve written namespaced: true in mock store’s object too.
What can be the reason for this error??? Please help.
Thank you.