Can someone guide me on how to properly test mutations and state? I have a modal window component that is rendered when the showModal property in the state is true. There is an event triggering a mutation that changes this property. How can I verify that after the event is triggered, the component is no longer rendered? Do I need to import the actual Vuex storage?
<template>
<div>
<transition name="fade" appear>
<div ref="modal" class="modal-overlay"
v-if="isShow"
@click="close">
</div>
</transition>
<transition name="pop" appear>
<div class="modal"
role="dialog"
v-if="isShow"
>
<div class="layer">
<slot name="content"></slot>
</div>
</div>
</transition>
</div>
import { mapState } from 'vuex'
export default {
name: "VModal",
computed:{
...mapState({
isShow: state => state.showModal
})
},
methods:{
close(){
this.$store.commit('SHOW_OR_HIDE_MODAL', false)
}
}
}
import Vuex from "vuex"
import { mount, createLocalVue } from "@vue/test-utils"
import VModal from '../../assets/src/components/VModal'
const localVue = createLocalVue()
localVue.use(Vuex)
describe('testing modal', () => {
let mutations
let state
let store
beforeEach(() => {
state = {
showModal: true
}
mutations = {
SHOW_OR_HIDE_MODAL: jest.fn()
}
store = new Vuex.Store({ state, mutations })
})
test('check close modal', async () => {
const wrapper = mount(VModal, {
store, localVue
})
await wrapper.find(".modal-overlay").trigger("click")
await wrapper.vm.$nextTick();
expect(wrapper.find(".modal-overlay").exists()).toBe(false)
expect(wrapper.find(".modal").exists()).toBe(false)
})
})
I also have an index.js file with the store setup.
https://i.sstatic.net/5eXm6.png
While testing, I encountered an error after clicking. https://i.sstatic.net/bHFRG.png
I realize my mistake but struggle with testing Vuex correctly. Apologies for the naive question, any help would be greatly appreciated.