使用Vitest模拟Pinia Store失败，请求排查解决

以下是针对你遇到的问题的具体排查和解决步骤：

1. 确保测试环境中Pinia已正确初始化 #

测试组件前必须确保Pinia被挂载到Vue实例，否则store无法被正确注入：

import { createPinia, setActivePinia } from 'pinia'
import { mount } from '@vue/test-utils'
import AdsView from '@/views/AdsView.vue'

beforeEach(() => {
  // 每次测试前创建新的Pinia实例并激活
  setActivePinia(createPinia())
})

test('AdsView renders correctly', () => {
  const wrapper = mount(AdsView, {
    global: {
      plugins: [createPinia()]
    }
  })
})

2. 修正vi.mock的路径与模拟结构 #

Pinia store通过导出的useXXXStore函数提供实例，必须准确mock这个函数并返回包含所需属性的对象：

// 确保路径与项目中styleStore的实际路径一致（比如@/stores/styleStore）
vi.mock('@/stores/styleStore', () => ({
  useStyleStore: vi.fn(() => ({
    darkMode: false, // 模拟darkMode属性，根据测试需求设置值
    // 如果Layout中还用到了store的其他方法/属性，需要一并模拟
  }))
}))

3. 验证组件中store的使用方式 #

检查Layout.vue中是否通过正确方式获取store实例：

<script setup>
// 正确写法：通过useStyleStore函数获取实例
import { useStyleStore } from '@/stores/styleStore'
const styleStore = useStyleStore()
</script>

<template>
  <div :class="{ dark: styleStore.darkMode }">...</div>
</template>

错误写法（直接导入store对象）会导致模拟失效：

// 错误：不要直接导入store实例
import styleStore from '@/stores/styleStore'

4. 确认mock被正确调用 #

在测试中添加断言，验证mock的store函数是否被执行，排查路径或结构问题：

import { useStyleStore } from '@/stores/styleStore'

test('styleStore mock works', () => {
  mount(AdsView)
  expect(useStyleStore).toHaveBeenCalled()
})

5. 排查嵌套组件的store依赖 #

如果AdsView嵌套了Layout组件，确保Layout的setup函数中已正确声明store实例，避免在模板中直接访问未初始化的store属性。

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