Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

152
Views
How to test vuex state and mutations correctly?

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

enter image description here

But in test after click I get error enter image description here

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

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

On your test, you are setting your state showModal to true:

beforeEach(() => {
  state = {
    showModal: true
  }
  ...
})

So your overlay is rendered and that is why your test conditions resolves as true.

<div ref="modal" class="modal-overlay"
   v-if="isShow"
   @click="close">
 </div>
enter code here

Your 'isShow' computed value is point to the showModal = true on your test.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!