如何为Nuxt2中结合Vuex、TS、Composition API的组件编写VTU测试

前置依赖检查 #

先确认你已经安装了适配Nuxt2（Vue2）的测试依赖：

• @vue/test-utils@1.x：Vue2对应的官方测试工具，不可使用适配Vue3的2.x版本
• vuex：和项目中使用的版本保持一致即可
• 测试运行器可选用jest或者兼容Vue2的vitest版本
• @vue/composition-api：和项目内@nuxtjs/composition-api依赖的版本对齐

方案1：单元测试（Mock Vuex Store，仅测试组件逻辑） #

该方案不需要依赖真实的Vuex逻辑，仅验证组件是否正确调用Store方法、正确响应Getter返回值，运行速度快，聚焦组件本身逻辑。

import { mount, createLocalVue } from '@vue/test-utils'
import VueCompositionAPI from '@vue/composition-api'
import Index from './index.vue' // 替换为你的组件实际路径

// 创建本地Vue实例避免污染全局
const localVue = createLocalVue()
localVue.use(VueCompositionAPI)

// 模拟Store实例
const mockStore = {
  getters: {
    getSidebarStatus: false
  },
  dispatch: jest.fn()
}

describe('Index 组件', () => {
  it('初始状态下隐藏侧边栏内容', () => {
    const wrapper = mount(Index, {
      localVue,
      mocks: {
        $store: mockStore
      }
    })
    expect(wrapper.find('[data-test="open-sidebar"] div').isVisible()).toBe(false)
  })

  it('点击侧边栏触发按钮时调用Store的openSidebar action', () => {
    const wrapper = mount(Index, {
      localVue,
      mocks: {
        $store: mockStore
      }
    })
    wrapper.find('[data-test="open-sidebar"]').trigger('click')
    expect(mockStore.dispatch).toHaveBeenCalledWith('openSidebar')
  })

  it('当getSidebarStatus为true时显示侧边栏内容', () => {
    const wrapper = mount(Index, {
      localVue,
      mocks: {
        $store: {
          ...mockStore,
          getters: {
            getSidebarStatus: true
          }
        }
      }
    })
    expect(wrapper.find('[data-test="open-sidebar"] div').isVisible()).toBe(true)
  })
})

方案2：集成测试（使用真实Vuex Store，连带测试Vuex逻辑） #

如果需要同时验证组件和Vuex模块的交互正确性，可以使用真实的Vuex实例做集成测试：

import { mount, createLocalVue } from '@vue/test-utils'
import VueCompositionAPI from '@vue/composition-api'
import Vuex from 'vuex'
import Index from './index.vue'
// 替换为你的Vuex模块实际路径
import sidebarModule from './store/sidebar'

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

describe('Index 组件 + Vuex 集成测试', () => {
  let store: any
  // 每次测试前初始化全新的Store实例，避免测试间状态污染
  beforeEach(() => {
    store = new Vuex.Store({
      // 如果你的模块是命名空间模块，此处和实际配置对齐即可
      ...sidebarModule
    })
  })

  it('点击按钮后侧边栏状态正确更新，内容正常显示', async () => {
    const wrapper = mount(Index, {
      localVue,
      store
    })
    // 验证初始状态
    expect(wrapper.find('[data-test="open-sidebar"] div').isVisible()).toBe(false)
    // 触发点击事件
    wrapper.find('[data-test="open-sidebar"]').trigger('click')
    // 等待状态和DOM更新完成
    await localVue.nextTick()
    // 验证Store状态变更
    expect(store.state.isSidebarOpen).toBe(true)
    expect(store.getters.getSidebarStatus).toBe(true)
    // 验证视图更新符合预期
    expect(wrapper.find('[data-test="open-sidebar"] div').isVisible()).toBe(true)
  })
})

常见问题排查 #

• 若出现useStore is called without provider报错：确认localVue已经注册了VueCompositionAPI，且mount配置中正确传入了store或者mocks.$store
• 视图未按预期更新：触发事件后调用await nextTick()等待DOM更新完成再做断言
• 命名空间模块适配：如果你的Vuex模块开启了命名空间，注册Store和组件内调用dispatch时需要同步加上命名空间前缀

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