Skip to content

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

Open
@romanlamsal

Description

@romanlamsal

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions