使用Vitest、Vue Test Utils、Pinia测试NavBar组件遇TypeError求助

问题原因 #

你的组件通过navStore.getNavState控制样式，但测试中的createTestingPinia仅提供了Pinia测试环境，并未自动创建组件依赖的navStore实例，导致组件访问navStore时返回undefined，进而触发属性读取错误。

stubActions: false的作用是不对Store的actions进行 stub（即保留原逻辑），但它不会自动初始化你的自定义Store实例或其状态/getters，所以仍需手动处理Store的初始化。

解决步骤 #

1. 导入你的navStore定义：测试中需要明确导入组件使用的Store。
2. 在测试环境中初始化Store：通过useNavStore获取测试用的Store实例，并设置getNavState的初始值（如果是getter则需mock）。
3. 避免全局污染：将组件挂载逻辑放在beforeEach中，确保每个测试都使用干净的Store和组件实例。

修改后的完整测试代码 #

import { describe, it, expect, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import { createTestingPinia } from '@pinia/testing'
import { useNavStore } from '@/stores/navStore' // 替换为你的navStore实际路径

// Import component
import NavBar from '../base/layout/NavBar.vue'

describe('NavBar Test', () => {
  let wrapper
  let navStore

  beforeEach(() => {
    // 创建测试用Pinia环境并挂载组件
    wrapper = mount(NavBar, {
      plugins: [
        createTestingPinia({
          stubActions: false,
        }),
      ],
    })
    // 获取测试用的navStore实例
    navStore = useNavStore()
    // 初始化getNavState的值（根据实际类型调整）
    navStore.getNavState = false
  })

  it('渲染所有必填元素', () => {
    expect(wrapper.find('.nav-logo').exists()).toBeTruthy()
    expect(wrapper.find('.nav-links').exists()).toBeTruthy()
    expect(wrapper.find('.nav-toggles').exists()).toBeTruthy()
  })

  it('当导航状态为true时，给logo添加open类', () => {
    navStore.getNavState = true
    expect(wrapper.find('.nav-logo').classes()).toContain('open')
  })
})

针对Getter的特殊处理 #

如果getNavState是Store中的getter而非直接的state属性，需要在创建测试Pinia时mock该getter：

createTestingPinia({
  stubActions: false,
  createSpy: vitest.fn,
  // 直接mock getter
  getters: {
    'nav/getNavState': () => false // 替换为你的Store ID和getter名称
  }
})

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