Vue3 testing composition API with vuex in vitest

Question

I'm having trouble getting a mock action to run using Vue3 while testing with vitest.

I have a component which calls out to a modularized vuex store that is imported into my component using the composition api. Something like the following.

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

I use createNamespacedHelpers to setup my store module from the vuex-composition-helpers library.

After I use useStore with a Symbol key to setup the state of my store. I consume it in my application by doing

app.use(store, key)

To mock it in my tests I was trying the following

   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 }
      }
    })

But my spy is never called and my component always calls the original implementation. Is there a way to get all these pieces working together?

user_6277151 · Answer

The mockStore here (from Vuex's createStore()) is an instance of a Vue plugin, which should be passed to the global.plugins mounting option (not 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

Vue3 testing composition API with vuex in vitest

1 Answers