如何正确测试 vuex 状态和突变？

Question

告诉我如何正确测试突变和状态。我有一个模态窗口组件，如果 state 中的 showModal 属性为 true，它就会被渲染。并且有一个事件会导致更改属性的突变。 如何检查事件被调用后，组件不再渲染？我需要导入实际的 vuex 存储吗？

<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)
 })
})

我有 index.js 和 store

但是在点击后的测试中我得到了错误

我明白我做错了什么，但我不知道如何正确测试 vuex，抱歉这个愚蠢的问题，任何帮助将不胜感激

Answer 1

在您的测试中，您将状态 showModal 设置为 true：

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

因此您的叠加层被渲染，这就是您的测试条件解析为 true 的原因。

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

您的“isShow”计算值指向测试中的 showModal = true。