Add a way to mock Vuex stores

[ghost]

What problem does this feature solve?

While Vue Test Utils are great for testing components, there is currently no official testing environment agnostic API for

• mocking and asserting Vuex actions dispatched by a component
• mocking and asserting Vuex mutations committed by an Vuex action

The current testing guidelines for actions require to copy a helper function.
If an action returns a Promise, the helper currently does not support that (vuejs/vuex#939) which has lead to a modified helper in our code base (https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/20513/diffs).

The current testing guidelines for components with Vuex require to manually create a new store and replace the actions with spies.
This leads to a lot of boilerplate in tests and therefore harder to maintain tests.

EDIT: the following content is outdated please see #1060 (comment)

Therefore I created Vuex Test Utils and would like to contribute them to Vue Test Utils.

• documentation: https://winh.gitlab.io/vuex-test-utils/
• source code: https://gitlab.com/winh/vuex-test-utils/tree/master/src
• example component test: https://gitlab.com/winh/vuex-test-utils/blob/master/example/test/components/header.spec.js
• example action tests: https://gitlab.com/winh/vuex-test-utils/blob/master/example/test/store/actions.spec.js

The project is currently missing unit tests (ironic I know!) which I plan to add after discussing the plan forward in this issue.

What does the proposed API look like?

Please see the documentation hosted at https://winh.gitlab.io/vuex-test-utils/.

[ghost]

@eddyerburgh I would love if you could have a look at this. 😃

[ghost]

The behavior of waitForAction() could be improved after vuejs/vuex#1115 is merged released.

EDIT: changed now via https://gitlab.com/winh/vuex-test-utils/commit/b47a1d4b12dab522df2d83af622d46bde06eaaec.

[ghost]

@eddyerburgh Any chance to get some feedback here? 😃 Is there anybody else I should ping?

[posva]

You may also want to check https://github.com/posva/vuex-mock-store
It uses a Proxy to let you not define any action or mutation and mock them automatically. Then you can check if the action or mutation was called. This is intended for unit testing where you don't want to call the actual store but only check that the right parameters are being passed.

import { Store } from 'vuex-mock-store'
import { mount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'

// create the Store mock
const store = new Store({
  state: { count: 0 },
  getters: { doubleCount: 0 },
})

// add other mocks here so they are accessible in every component
// could also be added globally in a setup.js file
const mocks = {
  $store: store,
}

// reset spies, initial state and getters
afterEach(() => store.reset())

describe('MyComponent.vue', () => {
  it('calls increment', () => {
	const wrapper = mount(MyComponent, { mocks })
    wrapper.find('button.increment').trigger('click')
    expect(store.commit).toHaveBeenCalledOnce()
    expect(store.commit).toHaveBeenCalledWith('increment')
  })
})

I like the idea of creating a store with spies from the original though. Could be useful for integration tests

[ghost]

@posva Thank you for looking into this! 👍

I did not know about the vuex-mock-store project until now. Maybe we can link to it from the vue-test-utils guide? Or even merge it into vue-test-utils?

From a first look, your implementation has some advantages over mine. For example that it works with dynamically registered actions / mutations (via hotUpdate or registerModule).

[posva]

Yeah, definitely! I think we started talking about it but right now there is a focus on vue core testing utils.
I could also help Edd with the addition of a mock for vue-router in the future

[ghost]

@posva Please let me know if there is anything community contributions can help with to drive this forward. 😃

Meanwhile I'm closing this issue and archive the vuex-test-utils project.

[posva]

Okay, thank you! Let's keep this open until we come up with a solution tho 😄

[lmiller1990]

That is a neat library @posva . I think that's a clean solution - not sure this is something that belongs in this library. We could consider adding some links to these community made "util libraries" in the docs, with some useful examples?

[posva]

Sounds good to me. The package seems to be widely used (by its download count). In the case of Vuex-mock-store, the readme is meant to show examples and any needed documentation for anybody to pick it up, so there is no need to write any new content