Pathify and Jest tests (w/ Vue Test Utils)

[liliumdev]

I've run into an issue while trying to write tests for a component utilizing Pathify. The component itself doesn't define any complex paths, just a wildcard ...sync('GuestList/*'), as a computed property.

Most of the test can be condensed to the following:

import { mount, createLocalVue, config } from '@vue/test-utils';
import Vuex from 'vuex';
import pathify from 'pathify';
import GuestList from '@/components/guest-list/GuestList.vue';
import GuestListStoreModule from '@/store/guest-list';

describe('GuestList', () => {
    let wrapper;
    let store;

    const localVue = createLocalVue();
    localVue.use(Vuex);

    beforeEach(() => {
        store = new Vuex.Store({
            modules: {
                GuestList: GuestListStoreModule
            },
            plugins: [pathify]
        });

        wrapper = mount(GuestList, {
            localVue,
            propsData: {
                list: {}
            },
            store
        });
    });

   // ... different test scenarios here...
   it('test scenario 1', () => {
        // ...
    });
});

When running the tests, the error being thrown by Pathify is:

 FAIL  tests/javascript/guest-list/GuestList.spec.js
  ● Test suite failed to run

    [Vuex Pathify] Unable to expand wildcard path 'GuestList/*':
        - The usual reason for this is that the router was set up before the store
        - Make sure the store is imported before the router, then reload

It seems that this error happens when the store is actually not yet initialized, according to this

vuex-pathify/src/services/wildcards.js

Line 126 in 9179968

if (!state) {

. But the store is being specified and thus initialized in the mount method from Vue Test Utils.

Has anyone encountered this issue before and managed to resolve it? I don't think mocking the entire store either is an option because Pathify would still fail on the line above.

[davestewart]

Hmm. Perhaps there is something that is different in test utils?

Let me look into this.

[davestewart]

Also, have you tried NOT using wildcards? What happens then?

Did you check the wildcards section of the docs?

https://davestewart.github.io/vuex-pathify/#/api/component?id=troubleshooting-wildcards

[liliumdev]

@davestewart Sorry, I have completely forgotten I've posted this issue and didn't pay attention to the notifications 😞 I'll try your suggestion today and see if anything changes.

[davestewart]

Any updates @liliumdev ?

[davestewart]

This might be related to this issue; I'll look into it this week or next:

• Unable to use with tests due to caching of getters #70

[jcaruthersjr]

Also, have you tried NOT using wildcards? What happens then?

Did you check the wildcards section of the docs?

https://davestewart.github.io/vuex-pathify/#/api/component?id=troubleshooting-wildcards

@davestewart I tried it without the wildcards, and explicitly accessed the needed getters from the store and that worked. We are needing to be able to test with jest and cypress with the wildcard for most of our views have many fields. Do you have a solution for this error?

[davestewart]

Hey @jcaruthersjr - I don't TBH.

Testing is not really my forte, but I would be happy to look into it.

Can you post a small repo for me to examine? You could fork the existing simple demo and just add some tests I presume...

• https://github.com/davestewart/vuex-pathify-demos/tree/master/simple

[liliumdev]

Ugh, again this issue I've created dropped off my radar. @davestewart It didn't work without wildcards either for me. We dropped Jest tests since then lol, but let me know if I can do some other tests if you want to resolve this.

[jcaruthersjr]

@davestewart https://codesandbox.io/s/admin-test-9re3z?fontsize=14&hidenavigation=1&theme=dark if you uncomment the computed section of the databases-config.vue // databases: get("databases"),
// servers: get("servers") and comment out ...get("") run the jest test it will pass. If you keep the database-config.vue as is ...get("") uncommented the jest test will give the error[Vuex Pathify] Unable to expand wildcard path '*':
- The usual reason for this is that the router was set up before the store
- Make sure the store is imported before the router, then reload
Thanks for looking into this error.