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.
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.
Describe the bug
When passing a store directly into
render
as option, all mutations are lost on Vue2 components.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:
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 inoptions.mocks.$store
.Screenshots
Related information:
@testing-library/vue
version: 5.8.3Vue
version: 2.7.11node
version: 16.14.2npm
(oryarn
) version: pnpm 7.13.1Some more infos:
vitest
version: 0.24.1vite
version: 3.1.7vite-plugin-vue2
version: 2.0.2Relevant code or config (if any)
Additional context