Is documentation Obsolete for Vuex modules?

[gkatsanos]

While implementing we noticed that the proposed syntax for modules does not work: https://vue-test-utils.vuejs.org/en/guides/using-with-vuex.html

Instead, what we ended up doing is this:

import Preferences from 'models/preferences';

  beforeEach(() => {
    store = new Vuex.Store({
      modules: {
        Preferences: {
          state: {
            panelVisible: true,
          },
          mutations: Preferences.mutations,
          getters: Preferences.getters,
          namespaced: true,
        },
      },
    });
  });

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!

[gkatsanos]

@eddyerburgh please rethink the auto-closing of tickets. It's a bit extreme.

[eddyerburgh]

@gkatsanos the issue tracker is used throughout Vue projects. I understand it can be annoying for some issues, but it encourages users to report bugs in a way that makes it easy to debug and fix.

With regards to your original issue, would you like to update the docs to include your working example?

[gkatsanos]

I would be glad to but that would mean I have a thorough understanding of how testing namespaced modules should be done (which apparently now isn't the case) - could you confirm my suspicion that you need a `modules` object in order to properly create a Vuex store which uses modules for testing?

[gkatsanos]

@eddyerburgh could you confirm that my proposed structure is how we should initialize a store for testing? I will proceed to a PR then :)

[eddyerburgh]

Yep, I can confirm that that's how to intialize a store with modules :)

[eddyerburgh]

@gkatsanos are you intending to implement this?

[gkatsanos]

Yep, will do this weekend.

[gkatsanos]

https://github.com/vuejs/vue-test-utils/pull/632/files @eddyerburgh

[lmiller1990]

Nice job updating the docs. @gkatsanos

In my experience over the last year or so of building large Vue apps, I came to the conclusion you should generally not use the actual store in your tests. To see if an action is dispatched, I have been doing:

const dispatch = jest.fn()
const $store = { dispatch }

wrapper  = shallow(Component, { 
  mocks: { $store }
}

// something to dispatch action

expect(dispatch).toHaveBeenCalledWith('nameOfAction', payload)

Now you do not need to worry about how the store is structured. You can decouple the store from the component.

The component should not even have knowledge of it - it's responsibility is simply to dispatch the correctly named action with the right payload.

Something like this might be a good fit for the docs (maybe?). We do have the Vue cookbook, but I think vue-test-utils could easily have it's own cookbook, considering how large and important the topic of testing is, although not sure if the team is looking to expand the guides section or not. If so I would be interesting in writing more about this.