In my Typescript-written Vue component, I am facing an issue while trying to write a unit test using vue-test-utils and jest. The problem arises when injecting the vuex store that was created with vuex-module-decorators.
Below is a snippet from my Vue component:
mycomponent.vue
<template>
<v-autocomplete
v-model="job
:items="jobs"
outlined
dense
@change="editJob"
/>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { jobsWantedStore } from '../../utils/store-accessor'
@Component
export default class SelectJob extends Vue {
async editJob() {
try {
await jobsWantedStore.EDIT_JOB(this.job)
} catch (error) {
this.error = error
}
}
}
}
</script>
The related vuex store code is as follows:
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { Module, VuexModule, Action, Mutation, getModule } from 'vuex-module-decorators'
import { PrioritisedJob } from '~/models'
import JobsWantedService from '~/services/jobs-wanted-service'
// Rest of the code here...
And here is the store accessor:
/* eslint-disable import/no-mutable-exports */
import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import jobsWanted from '../store/jobsWanted'
// Rest of the code here...
My test file looks like this:
job.spec.js
import { shallowMount, createLocalVue } from '@vue/test-utils'
import mycomponent from '@/components/mycomponent.vue'
import Vuetify from 'vuetify'
import Vuex from 'vuex'
// Rest of the test code here...
When running the tests, it shows that jobsWantedStore is undefined, causing issues with the test execution. Any suggestions on how to properly inject the store using vuex-module-decorators?