tell me how to test mutations and state correctly. I have a modal window component, it is rendered if the showModal property in the state is true. And there is an event that causes a mutation that changes the property.
How to check that after the event is called, 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)
})
})
And I have index.js with store
But in test after click I get error
I understand what I’m doing wrong, but I can’t figure out how to properly test vuex, sorry for the stupid question, any help would be appreciated