Nuxt3+Vitest+Pinia组件测试报错：无法读取undefined的loading属性

你遇到的TypeError: Cannot read properties of undefined (reading 'loading')，本质是测试环境中Pinia实例未正确注入，导致组件内调用useUserStore()返回undefined，进而无法访问loading属性。以下是具体的修复方案：

核心思路 #

在测试用例中手动创建并注入Pinia实例，确保组件能正确获取到Store。步骤如下：

1. 导入必要依赖 #

在测试文件顶部导入Pinia工具方法、测试挂载函数、目标组件及对应的Store：

import { mount } from '@vue/test-utils' // 若使用Nuxt官方测试工具则替换为@nuxt/test-utils
import { createPinia, setActivePinia } from 'pinia'
import LoginComponent from './LoginComponent.vue'
import { useUserStore } from '~/stores/user'

2. 初始化Pinia与Store #

在beforeEach钩子中创建独立的Pinia实例并激活，同时初始化Store，保证每个测试用例拥有干净的环境：

describe('LoginComponent', () => {
  let pinia
  let userStore

  beforeEach(() => {
    // 创建独立Pinia实例，避免测试用例间状态污染
    pinia = createPinia()
    // 激活Pinia，确保useUserStore能获取到有效实例
    setActivePinia(pinia)
    // 初始化userStore
    userStore = useUserStore()
  })

3. 挂载组件时注入Pinia #

挂载组件时，通过global.plugins将Pinia注入到测试用的Vue实例中，让组件内部能正常调用useUserStore()：

it('组件渲染无错误', () => {
    const wrapper = mount(LoginComponent, {
      global: {
        plugins: [pinia]
      }
    })
    // 示例断言：验证登录按钮存在
    expect(wrapper.find('button').exists()).toBe(true)
  })

4. 测试Store状态对组件的影响 #

直接修改Store状态，验证组件的响应表现，比如测试loading状态下按钮是否禁用：

it('loading状态下按钮禁用', () => {
    // 设置store的loading为true
    userStore.loading = true
    const wrapper = mount(LoginComponent, {
      global: {
        plugins: [pinia]
      }
    })
    expect(wrapper.find('button').attributes('disabled')).toBeDefined()
  })
})

注意事项 #

• 若使用@nuxt/test-utils的mount方法，需改为异步调用（await mount(...)），因为Nuxt需要初始化环境。
• 确保userStore中loading属性有初始值（比如默认false），避免初始化Store后仍出现属性未定义的问题。

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