[Vuejs]-Vue-test-utils. Mocked vuex is used in .vue file, but original vuex is used in .ts file

0👍

To be more precisely you are not mocking the store, you are using the real store but the one you created in a test file.
If you want to mock you should remove your store object and include all your Vuex store logic in mock property while calling mount, e.g:

const wrapper = mount(Transfers, { 
    mocks: {
      $store: {
        getters: {
          // your getters
        },
        actions: {
          // your actions
        },
      }
   }
);

If you want to keep testing the way you have already started the problem might be in fact that you didn’t called localVue.use(Vuex) before mounting the component, at least you didn’t show that line in provided code.

0👍

I just solved this problem by not mocking vuex store, but using the original store like below.

index.ts

Vue.use(Vuex)
...
const store: StoreOptions<RootState> = {
  state: {
    ...
  },
  mutations: {
    ...
  },
  actions: {},
  modules: {
    ...
  },
  getters: {}
}

export default new Vuex.Store<RootState>(store)

transfers.test.js

...
import indexStore from '../../store/index'
...
const localVue = createLocalVue()
...
localVue.use(Vuex)
...
const store = indexStore

describe('With params: all', () => {
  ...
  const wrapper = mount(Transfers, {
    localVue,
    store,
  ...

Leave a comment