Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

154
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda