Vue3 测试组合 API 在 vi​​test 中使用 vuex

Question

在使用 vitest 进行测试时，我无法使用 Vue3 对 运行 执行模拟操作。

我有一个组件调用一个模块化的 vuex 存储，该存储使用组合 api 导入到我的组件中。类似于以下内容。

export default defineComponent({
  setup() {
    const { doAction } = useModActions([
      'doAction'
    ])
  }
})

我使用 createNamespacedHelpers 从 vuex-composition-helpers 库设置我的商店模块。

在我使用 useStore 和 Symbol 键设置我的商店状态之后。我通过

在我的应用程序中使用它

app.use(store, key)

为了在我的测试中模拟它，我正在尝试以下操作

   const actions = {
      doAction: vi.fn()
    }
    const spy = vi.spyOn(actions, 'doAction')
    const mockStore = createStore({
      modules: {
        mod: {
          namespaced: true,
          actions
        }
      }
    })
    const wrapper = mount(Component, {
      global: {
        provide: { [key]: mockStore }
      }
    })

但我的间谍从未被调用，我的组件总是调用原始实现。有没有办法让所有这些部分一起工作？

Answer 1

这里的mockStore（来自Vuex的createStore()）是一个Vue插件的实例，应该传递给global.plugins挂载选项（不是global.provide） :

// MyComponent.spec.js
import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import { createStore } from 'vuex'
import MyComponent from '../MyComponent.vue'

describe('MyComponent', () => {
  it('button calls doAction', async () => {
    const actions = {
      doAction: vi.fn(),
    }
    const mockStore = createStore({
      modules: {
        myModule: {
          namespaced: true,
          actions,
        },
      },
    })
    const wrapper = mount(MyComponent, {
      global: {
        plugins: [mockStore], // 
      },
    })
    await wrapper.find("button").trigger("click")
    expect(actions.doAction).toHaveBeenCalled()
  })
})

demo