I have reviewed a few tutorials on mocking and testing Vuex actions, but I have struggled to implement them successfully on my own. Despite following the steps outlined in the links provided, I consistently encountered an issue where toHaveBeenCalled
would return false
. Is it not possible to mock Actions without replicating their actual functionality using jest.fn()
? I'm confused as to why I am unable to achieve this.
store.js
export default new Vuex.Store({
state: {
currentSequence: ''
},
actions: {
runGenerator({ commit, state }, currentSequence) {
// do something with currentSequence
}
}
})
Home.vue (Note that this is not the complete code for this component, but includes important sections such as the submit.prevent method, the form html, and where the vuex action is called)
<template>
<v-app id="inspire">
<v-form @submit.prevent="setNextVal" id="sequence-form">
<!-- form contents here -->
</v-form>
</v-app>
</template>
<script>
import { mapActions } from 'vuex'
export default {
methods: {
setNextVal() {
this.runGenerator(this.form.currentSequence)
this.form.currentValue = this.getCurrentValue
},
...mapActions([
'runGenerator'
]),
}
}
</script>
store.spec.js
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vue from 'vue'
import Vuex from 'vuex'
import Vuetify from 'vuetify'
import Home from '@/views/Home.vue'
const localVue = createLocalVue()
localVue.use(Vuex)
Vue.use(Vuetify)
describe('Home.vue', () => {
let actions
let store
beforeEach(() => {
actions = {
runGenerator: jest.fn()
}
store = new Vuex.Store({
state: {
currentSequence: ''
},
actions
})
})
it('Dispatches "runGenerator" when submit.prevent has been triggered', () => {
const wrapper = shallowMount(Home, { store, localVue })
const form = wrapper.find('#sequence-form')
form.trigger('submit.prevent')
expect(actions.runGenerator).toHaveBeenCalled()
})
})
Upon running the test, I received the following error:
expect(jest.fn()).toHaveBeenCalled() Expected mock function to have been called, but it was not called
What could be the missing piece? I would appreciate any insights or alternative solutions you might have. I have extensively reviewed online references, but haven't found any other solutions thus far.