Как использовать Jest с vuex-module-decorators

У меня есть компонент 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?


person Elsa Szymczak    schedule 22.03.2021    source источник


Ответы (1)


Оказывается, я забыл ввести localVue, когда объявляю свою оболочку! Так и должно быть:

wrapper = shallowMount(SelectJob, {
            propsData,
            localVue,
            vuetify,
            store,
        })
person Elsa Szymczak    schedule 30.03.2021