Deprecate testAction helper in favor of vuex-mock-store #1562

winniehell · 2019-05-31T23:13:08Z

What problem does this feature solve?

The officially documented way to test actions

has a complex interface (5 positional, required arguments)
is always asynchronous—even if the action under test is not
requires copying a helper function from the documentation into a project's code base
involves manually patching that helper because of some shortcomings (see for example #939)
offers no way to automatically update the copied helper once it changes in the documentation

What does the proposed API look like?

Recommend to use https://github.com/posva/vuex-mock-store instead.

// actions.js

import shop from '../api/shop'

export const getAllProducts = ({ commit }) => {
  commit('REQUEST_PRODUCTS')
  return shop.getProducts().then(products => {
    commit('RECEIVE_PRODUCTS', products)
  })
}

// actions.spec.js

import { Store } from 'vuex-mock-store'

const store = new Store()

afterEach(() => store.reset())

describe('actions', () => {
  it('getAllProducts', done => {
    actions.getAllProducts(store)
      .then(() => {
        expect(store.commit).toHaveBeenCalledTimes(2)
        expect(store.commit).toHaveBeenCalledWith('REQUEST_PRODUCTS')
        expect(store.commit).toHaveBeenCalledWith('RECEIVE_PRODUCTS',  /* mocked response */)
      })
      .then(done)
      .catch(done.fail)
})

see also vuejs/vue-test-utils#1060

winniehell · 2019-05-31T23:13:40Z

@posva What do you think?

posva · 2019-06-03T18:44:27Z

I think my mock doesn't cover testing actions so far. To be honest, when testing actions I always pass things manually using jest.fn() to create mocks and just see if they were called.

I was thinking of adding some kind of api to generate a context that call other actions and mutations: posva/vuex-mock-store#9

winniehell · 2019-06-03T20:50:12Z

@posva Thanks for the fast reply! 🚀

I think my mock doesn't cover testing actions so far.

Ignoring Vuex modules for now (which aren't supported by the existing testAction helper either), what do you think is missing? Judging from the API docs, your mock store seems to provide everything from the context apart from rootState and rootGetters which should only be relevant in the presence of Vuex modules.

I always pass things manually using jest.fn() to create mocks

Isn't that exactly what your mock store does with dispatch and commit?

posva · 2019-06-03T21:03:28Z

but the Store mock can mock the whole store so you don't care about it in components. testAction is a helper to individually test an action, which you should still do if you are mocking the whole Store

winniehell · 2019-06-03T21:48:46Z

@posva You are only advertising vuex-mock-store for unit testing components but I think it can be used to unit test actions, too, because it has all we need. 😃

When unit testing actions, we want to mock away the state, getters, and mutations. All of that is already supported by vuex-mock-store. 🎉

Here is a working example project: https://gitlab.com/winniehell/vue-examples/blob/master/vuex-mock-action-tests/test/store/actions.spec.js

posva · 2019-06-04T07:18:01Z

oh right, you pass the store to the action, I didn't see that! That's neat. Adding support for rootState and rootGetters could be added as well either directly on the store or with a getContext() method. Now, that I think about it, it could be useful to have o Module so modules can also be tested individually, but I need to think more about it

winniehell · 2019-06-05T21:47:48Z

Adding support for rootState and rootGetters could be added as well

@posva Do you think that is a requirement to replace the testAction helper? or can that be a second iteration?

with a getContext() method

I think such a method would be cleaner. 👍

it could be useful to have o Module

I agree! 👍 I would be happy to help adding that to vuex-mock-store if you like.

kiaking added the docs label Apr 23, 2020

vuejs / vuex

Deprecate testAction helper in favor of vuex-mock-store #1562

Deprecate testAction helper in favor of vuex-mock-store #1562

winniehell commented May 31, 2019 •

edited

winniehell commented May 31, 2019

posva commented Jun 3, 2019 •

edited

winniehell commented Jun 3, 2019

posva commented Jun 3, 2019

winniehell commented Jun 3, 2019

posva commented Jun 4, 2019

winniehell commented Jun 5, 2019

vuejs / vuex

Join GitHub today

Deprecate testAction helper in favor of vuex-mock-store #1562

Deprecate testAction helper in favor of vuex-mock-store #1562

Comments

winniehell commented May 31, 2019 • edited

What problem does this feature solve?

What does the proposed API look like?

winniehell commented May 31, 2019

posva commented Jun 3, 2019 • edited

winniehell commented Jun 3, 2019

posva commented Jun 3, 2019

winniehell commented Jun 3, 2019

posva commented Jun 4, 2019

winniehell commented Jun 5, 2019

winniehell commented May 31, 2019 •

edited

posva commented Jun 3, 2019 •

edited