如何用Jest和Vue Test Utils测试关联Vuex Getter的计算属性监听？

假设我们有如下Vue组件，通过计算属性关联Vuex的getter，并在getter更新时触发watch执行特定操作：

<template>
  <div class="user-profile">{{ userName }}</div>
</template>

<script>
export default {
  name: 'UserProfile',
  computed: {
    userName() {
      return this.$store.getters['user/getUserName']
    }
  },
  watch: {
    userName(newName) {
      this.updatePageTitle(newName)
    }
  },
  methods: {
    updatePageTitle(name) {
      document.title = `当前用户: ${name}`
    }
  }
}
</script>

下面是用Jest和Vue Test Utils测试该watch逻辑的具体步骤：

1. 搭建测试环境 #

首先导入测试所需依赖，创建localVue并注册Vuex，确保测试环境支持Vuex：

import { createLocalVue, shallowMount } from '@vue/test-utils'
import Vuex from 'vuex'
import UserProfile from '@/components/UserProfile.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

2. 构造Vuex Store实例 #

在测试用例的前置钩子中，创建包含目标state、getter和mutation的store。通过mutation修改state是触发getter更新的标准方式：

describe('UserProfile组件的watch逻辑', () => {
  let store
  let state
  let getters
  let mutations

  beforeEach(() => {
    // 初始化state
    state = {
      user: {
        name: '张三'
      }
    }

    // 定义目标getter，依赖state.user.name
    getters = {
      'user/getUserName': () => state.user.name
    }

    // 定义修改state的mutation
    mutations = {
      'user/SET_USER_NAME': (state, newName) => {
        state.user.name = newName
      }
    }

    // 创建Vuex store实例
    store = new Vuex.Store({
      state,
      getters,
      mutations
    })
  })

3. 编写测试用例 #

核心思路是：挂载组件后，通过mutation更新state触发getter变化，然后断言watch是否触发了目标操作：

it('当userName getter更新时，触发updatePageTitle方法', async () => {
    // 挂载组件
    const wrapper = shallowMount(UserProfile, {
      localVue,
      store
    })

    // 用Jest spy监听目标方法，便于断言调用情况
    const titleSpy = jest.spyOn(wrapper.vm, 'updatePageTitle')

    // 通过mutation更新state，触发getter和计算属性的更新
    store.commit('user/SET_USER_NAME', '李四')

    // 等待Vue完成响应式更新，确保watch逻辑执行完毕
    await wrapper.vm.$nextTick()

    // 断言方法被正确调用，参数符合预期
    expect(titleSpy).toHaveBeenCalledWith('李四')
    // 也可以直接断言页面标题的变化
    expect(document.title).toBe('当前用户: 李四')
  })
})

关键注意事项 #

• 必须通过mutation修改state：直接修改state虽然能触发更新，但不符合Vuex的规范，也不利于维护测试用例。
• 等待$nextTick：Vue的响应式更新和watch的执行是异步的，必须等待$nextTick完成后再进行断言，否则会出现断言失败的情况。
• 使用Spy监听方法：通过jest.spyOn可以直接验证方法是否被调用、调用次数和参数，比直接断言DOM或副作用更可靠。
• 针对immediate选项的测试：如果watch配置了immediate: true，则在组件挂载时就会触发一次，此时不需要更新state，直接断言方法是否被初始调用即可。

内容的提问来源于stack exchange，提问作者Roman Diez