如何将 Jest 与 vuex-module-decorators 一起使用

如何解决如何将 Jest 与 vuex-module-decorators 一起使用

我有一个用 Typescript 编写的 vue 组件，我在其中导入了一个用 vuex-module-decorators 编写的 vuex 存储。我的代码运行良好，但是当我尝试使用 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 正确注入 store 吗？

解决方法

原来我在声明我的包装器时忘记注入 localVue 了！ 所以应该是：

wrapper = shallowMount(SelectJob,{
            propsData,localVue,vuetify,store,})