У меня есть компонент vue, написанный на Typescript, где я импортирую хранилище vuex, написанное с помощью vuex-module-decorators. Мой код работает хорошо, но когда я пытаюсь написать модульный тест с использованием vue-test-utils и jest, я не могу внедрить свой магазин.
Вот мой компонент vue:
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>
Магазин :
/* 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'
@Module({
name: 'jobsWanted',
stateFactory: true,
namespaced: true,
})
export default class JobsWanted extends VuexModule {
jobsWanted: Array<PrioritisedJob> = []
// Getters
public get JobsWanted(): Array<PrioritisedJob> {
return this.jobsWanted
}
// Mutations
@Mutation
setJobs(jobsWanted: Array<PrioritisedJob>): any {
this.jobsWanted = jobsWanted
}
@Mutation
setJob(jobWanted: PrioritisedJob): any {
this.jobsWanted = this.jobsWanted.map((job) => {
if (jobWanted.id === job.id) {
return jobWanted
}
return { ...job }
})
}
@Action({ rawError: true })
public async EDIT_JOB(newJob: PrioritisedJob): Promise<any> {
try {
const job = await JobsWantedService.editJob(newJob)
this.setJob(job)
} catch (error) {
throw error.response
}
}
}
Аксессуар магазина:
/* eslint-disable import/no-mutable-exports */
import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import jobsWanted from '../store/jobsWanted'
let jobsWantedStore: jobsWanted
function initialiseStores(store: Store<any>): void {
jobsWantedStore = getModule(jobsWanted, store)
}
export { initialiseStores, jobsWantedStore }
Вот мой тестовый файл:
job.spec.js
import { shallowMount, createLocalVue } from '@vue/test-utils'
import mycomponent from '@/components/mycomponent.vue'
import Vuetify from 'vuetify'
import Vuex from 'vuex'
const localVue = createLocalVue()
const vuetify = new Vuetify()
localVue.use(Vuex)
describe('SelectJob', () => {
let wrapper
let store
let actions
let model
beforeEach(() => {
actions = {
EDIT_JOB: jest.fn(),
}
store = new Vuex.Store({
modules: {
jobsWanted: {
namespaced: true,
actions,
},
},
})
wrapper = shallowMount(SelectJob, {
propsData,
vuetify,
store,
})
})
it('should edit a job', () => {
wrapper.vm.editJob()
try {
expect(actions.EDIT_JOB).toHaveBeenCalled()
} catch (e) {
expect(e).toMatch('error')
}
})
})
Он сообщает мне, что он получил 0 звонков, и это потому, что jobsWantedStore
равно undefined
, когда я запускаю свои тесты. Кто-нибудь знает, как правильно ввести магазин с помощью vuex-module-decorators?