Error: [Vuex Pathify] Unexpected condition: this.$store is undefined. While running jest

[adityaswaroop823]

I am trying to run my test case but getting this error =>

( throw new Error('[Vuex Pathify] Unexpected condition: this.$store is undefined.\n\nThis is a known edge case with some setups and will cause future lookups to fail')
^
Error: [Vuex Pathify] Unexpected condition: this.$store is undefined.)

this is my test Setup

import {
  mount,
  shallowMount,
  createLocalVue,
  RouterLinkStub
} from '@vue/test-utils'
import VueRouter from 'vue-router'
import mockRouter from './mockRouter'
import infiniteScroll from 'vue-infinite-scroll'
import Vuex from 'vuex'
import store from '../../src/state/index'
import '@/fontawesome'
import { i18n } from '@/i18n'
const router = mockRouter.mock()
global.wrap = (Component, options) => {
  const localVue = createLocalVue()
  localVue.use(VueRouter)
  localVue.use(infiniteScroll)
  localVue.use(Vuex)

  const wrapper = shallowMount(Component, {
    localVue,
    router,
    i18n,
    store
  })
  return wrapper
}

this is my test
`import { shallowMount } from '@vue/test-utils'

import UpdateStatusModal from '../CircleMenu/UpdateStatusModal.vue'

describe('UpdateStatusModal', () => {
it('should filter status codes for WORK', () => {
const statusCodes = [
{ Value: 'OPEN', text: 'Open' },
{ Value: 'HOLD', text: 'Hold' },
{ Value: 'CLOSE', text: 'Close' },
{ Value: 'WORK', text: 'Work' },
{ Value: 'RESOLVED', text: 'Resolved' }
]

const selectedStatusCode = 'WORK'

const wrapper = wrap(UpdateStatusModal, {
  propsData: {
    statusCodes,
    selectedStatusCode
  }
})

// Access the method from the Vue instance
const currentStatusCodes = wrapper.vm.currentStatusCodes()

const expectedResult = [
  { Value: null, text: 'Please select a status code' },
  { Value: 'WORK', text: 'Work' },
  { Value: 'RESOLVED', text: 'Resolved' }
]

expect(currentStatusCodes).toEqual(expectedResult)

})

it('should filter status codes for RESOLVED', () => {
const statusCodes = [
{ Value: 'OPEN', text: 'Open' },
{ Value: 'HOLD', text: 'Hold' },
{ Value: 'CLOSE', text: 'Close' },
{ Value: 'WORK', text: 'Work' },
{ Value: 'RESOLVED', text: 'Resolved' }
]

const selectedStatusCode = 'RESOLVED'

const wrapper = wrap(UpdateStatusModal, {
  propsData: {
    statusCodes,
    selectedStatusCode
  }
})

// Access the method from the Vue instance
const currentStatusCodes = wrapper.vm.currentStatusCodes()

const expectedResult = [
  { Value: null, text: 'Please select a status code' },
  { Value: 'OPEN', text: 'Open' },
  { Value: 'CLOSE', text: 'Close' },
  { Value: 'WORK', text: 'Work' }
]

expect(currentStatusCodes).toEqual(expectedResult)

})

it('should return all status codes by default', () => {
const statusCodes = [
{ Value: 'OPEN', text: 'Open' },
{ Value: 'HOLD', text: 'Hold' },
{ Value: 'CLOSE', text: 'Close' },
{ Value: 'WORK', text: 'Work' },
{ Value: 'RESOLVED', text: 'Resolved' }
]

const selectedStatusCode = 'OTHER'

const wrapper = shallowMount(UpdateStatusModal, {
  propsData: {
    statusCodes,
    selectedStatusCode
  }
})

// Access the method from the Vue instance
const currentStatusCodes = wrapper.vm.currentStatusCodes()

const expectedResult = [
  { Value: null, text: 'Please select a status code' },
  ...statusCodes
]

expect(currentStatusCodes).toEqual(expectedResult)

})
})
`
and this is my Component

`

Status

Sub-status

Status Remarks

Are you sure that you want to close this incident?

Closing an incident will remove it from the incidents list.

<script> // @flow import { call, get, sync } from 'vuex-pathify' import _cloneDeep from 'lodash/cloneDeep' import _trim from 'lodash/trim' import api from '@/services' import { globalEventBus } from '@/helpers/globalEvents' import notify from '@/helpers/notify' import sleep from '@/helpers/sleep' import vPrompt from '@/components/Fields/dx/vPrompt' import vModal from '@/components/Fields/vModal' import vTextArea from '@/components/Fields/vTextArea' export default { name: 'UpdateStatusModal', components: { vTextArea, vModal, vPrompt }, data() { return { subStatusCodeLoading: false, remarks: null, initd: false, loaded: true, promptCloseIncident: false } }, computed: { incidentOverview: get('incidents/incidentOverview'), statusCodes: get('codes/statusCodes'), subStatusCodes: get('codes/subStatusCodes'), selectedStatusCode: sync('codes/selectedStatusCode'), selectedSubStatusCode: sync('codes/selectedSubStatusCode'), menuOpen: sync('circleMenu/menuOpen'), currentStatusCodes() { let filteredStatusCodes = _cloneDeep(this.statusCodes) if (this.selectedStatusCode === 'WORK') { filteredStatusCodes = filteredStatusCodes.filter( item => !['OPEN', 'HOLD', 'CLOSE'].includes(item.Value) ) } else if (this.selectedStatusCode === 'RESOLVED') { filteredStatusCodes = filteredStatusCodes.filter( item => item.Value !== 'WORK' && item.Value !== 'HOLD' ) } return [ { Value: null, text: 'Please select a status code' }, ...filteredStatusCodes ] }, currentSubStatusCodes() { const subStatusCodes = _cloneDeep(this.subStatusCodes) return [ { Value: null, text: 'Please select a sub-status code' }, ...subStatusCodes ] }, saveBtnDisabled() { if ( _trim(this.selectedStatusCode) && _trim(this.selectedSubStatusCode) && _trim(this.remarks) ) { return false } return true }, textAreaDisabled() { if ( !(_trim(this.selectedStatusCode) && _trim(this.selectedSubStatusCode)) ) { return true } if ( this.incidentOverview.Status === this.selectedStatusCode && this.incidentOverview.SubStatus === this.selectedSubStatusCode ) { return true } return false } }, watch: { selectedStatusCode() { if (!this.initd) { this.retrieveSubStatusCodes() } } }, mounted() { this.init() }, methods: { async init() { this.initd = true this.selectedStatusCode = this.incidentOverview.Status await this.retrieveSubStatusCodes() this.selectedSubStatusCode = this.incidentOverview.SubStatus this.remarks = null this.initd = false }, getSubStatusCodes: call('codes/getSubStatusCodes'), preSave() { if (this.selectedStatusCode === 'CLOSE') { this.promptCloseIncident = true } else { this.saveModal() } }, async saveModal() { this.loaded = false const IncidentId = this.incidentOverview.IncidentId const data = { IncidentId, Remarks: this.remarks, RemarksHtml: this.remarks, Status: this.selectedStatusCode, SubStatus: this.selectedSubStatusCode } let error = false const { data: result } = await api.incidents .setIncidentTransition(IncidentId, data) .catch(e => { console.log({ e }) notify.error(this.$t('saving.error')) this.loaded = true error = true }) if (error) return if (result.Result === false) { notify.error(result.ResultText || this.$t('saving.error')) this.loaded = true return } this.menuOpen = false globalEventBus.$emit('refreshSingleIncident') this.closeModal() this.loaded = true notify.success(result.ResultText || this.$t('saving.success')) return true }, async retrieveSubStatusCodes() { this.loaded = false this.subStatusCodeLoading = true this.selectedSubStatusCode = null await this.getSubStatusCodes(this.selectedStatusCode) this.subStatusCodeLoading = false this.loaded = true }, async closeModal() { await sleep(250) this.menuOpen = false this.$emit('closeModal', true) }, async closeIncident() { this.promptCloseIncident = false const saveResult = await this.saveModal() if (saveResult) { this.$router.push({ name: 'IncidentList' }) } } } } </script>

`
kindly help me regarding this issue.