testing-library/vue-testing-library

Vuex store's mutations are lost when passing options.store in Vue2

romanlamsal opened this issue · 0 comments

Describe the bug

When passing a store directly into render as option, all mutations are lost on Vue2 components.

// won't work
const store = new Vuex.Store({ mutations: { foo(){} }})
const rendered = render(Component, { store })

// in the component
$store.commit('foo') // -> "[vuex] unknown mutation type: foo"

When inspecting the $store instance in the component, you'll find $store._mutations = {}.

A fix is to pass the store not directly but as mock:

// will work
const store = new Vuex.Store({ mutations: { foo(){} }})
const rendered = render(Component, { mocks: { $store: store } })

// in the component
$store.commit('foo') // -> no warning, works properly

Oddly enough, mapState works in either case - so reading the state works either way.

To Reproduce

See https://github.com/romanlamsal/testing-library-vue2-vuex-example

Expected behavior

Setting a store via options.store should not magically remove all mutations but keep passing on $store.state. It's confusing why this would work as intended if a store is specified in options.mocks.$store.

Screenshots

Related information:

  • @testing-library/vue version: 5.8.3
  • Vue version: 2.7.11
  • node version: 16.14.2
  • npm (or yarn) version: pnpm 7.13.1

Some more infos:

  • vitest version: 0.24.1
  • vite version: 3.1.7
  • vite-plugin-vue2 version: 2.0.2

Relevant code or config (if any)

Additional context