Quasar框架Cypress组件测试Pinia报错的解决方法咨询

问题 #

在基于Vue.js的Quasar框架中编写Cypress组件测试时，遇到如下错误：

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

const pinia = createPinia()

app.use(pinia)

This will fail in production.

尝试在commands.ts中添加以下代码，但无效：

Cypress.Commands.add('mount', (component) => {
  return mount(component, {
    global: {
      plugins: [createPinia()]
    }
  })
})

请问如何在Cypress中正确集成Pinia，使使用Pinia的组件测试正常执行？

解决方案 #

1. 修正自定义mount命令的配置 #

Quasar框架下需要同时注册Quasar插件和Pinia，修改commands.ts中的代码，确保两者都被正确注入到全局配置中：

import { mount } from 'cypress/vue'
import { createPinia } from 'pinia'
import { Quasar } from 'quasar'

Cypress.Commands.add('mount', (component, options = {}) => {
  // 创建独立的Pinia实例
  const pinia = createPinia()

  // 合并全局插件配置，避免覆盖原有配置
  options.global = { ...options.global }
  options.global.plugins = [...(options.global.plugins || []), pinia, Quasar]

  // 若项目需要Quasar的全局配置（如主题、国际化），可在此补充provide
  // options.global.provide = { ...options.global.provide, $q: { /* 你的Quasar配置 */ } }

  return mount(component, options)
})

2. 提前激活Pinia（针对组件初始化时直接调用useStore的场景） #

如果组件在setup钩子顶层就调用了useStore()，需要在测试前提前激活Pinia实例，避免挂载时找不到active Pinia：

import { createPinia, setActivePinia } from 'pinia'
import YourComponent from '@/components/YourComponent.vue'

describe('YourComponent', () => {
  beforeEach(() => {
    // 每次测试前创建并激活新的Pinia实例，保证测试隔离
    setActivePinia(createPinia())
  })

  it('渲染正常并能访问Pinia', () => {
    cy.mount(YourComponent)
    // 执行你的测试断言
  })
})

3. 测试中验证Pinia状态 #

可以通过cy.window()获取全局的Pinia实例，验证store是否正常工作：

import { useYourStore } from '@/stores/yourStore'

it('能正确读取和修改Pinia状态', () => {
  cy.mount(YourComponent)
  cy.window().then(window => {
    const store = useYourStore(window.__pinia)
    expect(store.userName).to.equal('初始值')
    store.setUserName('测试用户')
    expect(store.userName).to.equal('测试用户')
  })
})

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