Testing components that use Vuex modules

[thehavoc]

I'm training to test my components that use Vuex modules by following the Module example.

However, when I run the tests, there are warnings like this one:

[vuex] module namespace not found in mapGetters(): 

An example test can be seen on NewQuickTask.spec.js

This is the code of the first getter that throws the above error: errors.js.

This is the module: store/modules/errors.js.

I'd like to check if you know what might cause these warnings. Thanks.

[thehavoc]

I've just figured it out. The modules have to be explicitly loaded as modules by Vuex in the spec file. For example:

    beforeEach (() => {
        store = new Vuex.Store({
            state: {},
            modules: {
                errors,
                tasks
            }
        });
    });

I hope this will be helpful for others that experience the same problem.

[francescq]

What happens when the app has lots of nested modules? The component is coupled with the store module. If we have to create all the structure to satisfy the namespaced modules makes the test unmaintainable.

Is there any way to just use the vuex module needed so it's not needed to create the whole store? Am I missing something obvious?

[VRuzhentsov]

@francescq i'm using something like

import * as permissionsModule from "~/store/permissions";
import cloneDeep from "lodash/cloneDeep";

const store = new Vuex.Store({
    state: { },
    modules: {
      permissions: cloneDeep(permissionsModule)
    }
  });