测试含Pinia Store的Vue3组件时遇模块找不到错误求助

先搞定路径别名的问题 #

测试框架（不管是Vitest还是Jest）默认不识别Vue项目里的@别名，得手动给测试环境配置路径解析：

Vitest配置 #

在vitest.config.ts（或复用vite.config.ts）中添加路径别名配置：

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom'
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

Jest配置 #

在jest.config.js里配置moduleNameMapper：

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  // 其他Jest相关配置按需添加
}

再正确Mock Pinia Store #

别名配置完成后，还需要确保测试时Pinia能正常初始化和Mock，以下是实际示例：

import { mount } from '@vue/test-utils'
import { createPinia, setActivePinia } from 'pinia'
import YourComponent from '@/components/YourComponent.vue'
// 现在可正常导入store
import { useYourStore } from '@/stores/store'

beforeEach(() => {
  // 初始化Pinia实例
  const pinia = createPinia()
  setActivePinia(pinia)
  // Mock所需的store方法与状态
  vi.mock('@/stores/store', () => ({
    useYourStore: vi.fn(() => ({
      count: 0,
      increment: vi.fn()
    }))
  }))
})

test('组件可正常渲染', () => {
  const wrapper = mount(YourComponent, {
    global: {
      plugins: [createPinia()]
    }
  })
  expect(wrapper.text()).toMatch('你的组件内容')
})

额外排查点 #

• 检查tsconfig.json的paths配置，确保TypeScript也能识别@：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

• 配置修改后重启测试服务，避免配置未生效
• 确认@/stores/store对应的实际文件路径无误，排查是否存在文件名/目录名拼写错误

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