Vue3组件测试（含Pinia）报错：getActivePinia()无活跃Pinia

问题描述 #

"getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?

测试基于Pinia的Vue3组件时，即便遵循官方文档操作，仍触发上述报错。尝试在beforeEach中调用setActivePinia(createPinia())，问题依旧存在。

相关代码 #

测试代码 #

import { describe, expect, it, vi } from 'vitest';
import { createTestingPinia } from '@pinia/testing';
import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('should', async () => {
    const wrapper = mount(MainFilter, {
      global: {
        plugins: [
          createTestingPinia({
            createSpy: vi.fn
          })
        ]
      }
    });

    expect(wrapper.find('div')).toBe(true);
  });
});

组件代码 #

import { defineComponent } from 'vue';
import { clientsStore } from '@/stores/clients';

const store = clientsStore();

export default defineComponent({
  name: 'MyComponent',
  data() {
    return {
      form: {
        id: ''
      }
    };
  },
  methods: {
    onSubmit() {
      store.updateMyStore(this.form);
    }
  }
});

问题根源 #

组件在模块顶层直接调用clientsStore()，这段代码会在组件挂载前就执行，而测试环境的Pinia是在mount时通过plugins注入的，此时还未完成初始化，自然找不到活跃的Pinia实例。

解决方案 #

不要在模块级别提前调用store函数，将store的获取延迟到组件生命周期内部，确保Pinia已经安装完成。

修改后的组件代码（Composition API） #

import { defineComponent } from 'vue';
import { useClientsStore } from '@/stores/clients'; // 遵循Pinia推荐的useXxxStore命名规范

export default defineComponent({
  name: 'MyComponent',
  data() {
    return {
      form: {
        id: ''
      }
    };
  },
  setup() {
    const store = useClientsStore(); // 在setup中获取store，此时Pinia已完成初始化
    return { store };
  },
  methods: {
    onSubmit() {
      this.store.updateMyStore(this.form);
    }
  }
});

若使用Options API，可修改为： #

import { defineComponent } from 'vue';
import { useClientsStore } from '@/stores/clients';

export default defineComponent({
  name: 'MyComponent',
  data() {
    return {
      form: {
        id: ''
      },
      store: null
    };
  },
  created() {
    this.store = useClientsStore(); // 在created钩子中获取，此时组件已挂载，Pinia可用
  },
  methods: {
    onSubmit() {
      this.store.updateMyStore(this.form);
    }
  }
});

测试代码同步修正 #

测试代码中存在两个小问题：挂载的组件名写错（MainFilter应为MyComponent），断言方式不符合Vue Test Utils规范，修正后如下：

import { describe, expect, it, vi } from 'vitest';
import { createTestingPinia } from '@pinia/testing';
import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('should render a div', async () => {
    const wrapper = mount(MyComponent, {
      global: {
        plugins: [
          createTestingPinia({
            createSpy: vi.fn
          })
        ]
      }
    });

    expect(wrapper.find('div').exists()).toBe(true); // 用exists()判断元素是否存在
  });
});

总结 #

• 核心问题：模块顶层过早调用store函数，Pinia未完成初始化
• 解决关键：将store的获取延迟到组件生命周期钩子（setup/created等）内部
• 测试注意：确保挂载组件名正确，使用符合规范的断言方式

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