vuex-module-decorators: TypeError: Cannot read property 'getters' of undefined

Hi,

I’m facing an issue here with TypeScript when I want to unit test my module.

My index.ts for my store:

import { StoreOptions } from 'vuex';
import { EndUsersModule } from './end-user-module';

const store: StoreOptions<{}> = {
  modules: {
    endUsers: EndUsersModule,
  },
};

My end-user-module.ts:

import { Action, Module, Mutation, VuexModule } from 'vuex-module-decorators';
import { EndUser } from './models';
import store from '@/shared/store'

@Module({
  dynamic: true,
  name: 'endUsers',
  store,
})
export class EndUsersModule extends VuexModule {
  private users: EndUser[] = [];
  
  public get endUsers() {
    return this.users;
  }
  
  @Action
  public async createEndUser(user: EndUser) {
    this.context.commit('createUserStart');
    
    try {
      await api.createUser(user);
      this.context.commit('createUserSuccess', user);
    } catch (err) {
      this.context.commit('createUserFail', err);
    }
  }
  
  @Mutation
  public createEndUserFail(err: any)         { /* implementation */ }
  @Mutation
  public createEndUserStart()                { /* implementation */ }
  @Mutation
  public createEndUserSuccess(user: EndUser) { /* implementation */ }
}

Now, I want to test the action createEndUser, but my problem is that when I do this at the top of my file:

import { EndUsersModule } from './end-user-module';
import { createModule } from 'vuex-module-decorators';

const endUsers = getModule(EndUsersModule);

describe('...', () => {
  // ...
});

And run my tests, I see the following error message:

TypeError: Cannot read property 'getters' of undefined

Can you please tell me how I can unit test my actions, or the whole module for that matter?

I was also trying to do it with vuex-class, but that also has its complications for actions. Then, I found your library, and I thought everything should be fine now, but that’s not the case 😦

About this issue

Original URL
State: open
Created 6 years ago
Comments: 18 (5 by maintainers)

Most upvoted comments

I just ran into this as well. Seems like there is no example on the internet on how to successfully unit test while using vuex-module-decorators.

Pita on Nov 14, 2019

I mean these my friend,

These are actual projects

These example repos even don’t have real tests scenario, my friend. Take a look yourself.

aislanmaia on Nov 19, 2019

@championswimmer man, I think what we really need is some examples testing component + the store modules. Preference for dynamic things, because, for somehow, they seems more complicated to integrate, I don’t know.

Do you have some examples for this unit tests, please?

aislanmaia on Nov 19, 2019

Hello @championswimmer is there any project that we can check how the testing was implemented? Neither of the already provided projects has any test that explains how to tackle this problem.

Please, is there somewhere where we can check it? Thanks in advance for your help so far!

niconj on Apr 9, 2020

Yes, you’re right, but personally I think it would help if an actual and working application is available to use as a reference. Examples are given in the README, but you can’t see the general structure of the application (files etc), and how to glue everything together.

Of course it’s just a suggestion for improvement that I think would help the users. I’ve been trying to make it work since yesterday, but I wasn’t able to, and now I’m getting another error TypeError: Cannot read property 'registerModule' of undefined, so something is undefined somewhere, but I have no idea what it is. If I could compare what I’m doing to a reference application, I personally think that would be useful

farzadmf on Dec 5, 2018

I just want to test these fields for State, Getters, Mutations, Actions into a container component.

What I’ve seen in this repository is just tests for the store itself. 😞

aislanmaia on Nov 19, 2019

I had the same issue. I resolved it by using this as store.ts


import Vue from 'vue';
import Vuex from 'vuex';
import UserStore from '@/stores/user-store';

Vue.use(Vuex);

interface StoreType {
  UserStore: UserStore
}

export default new Vuex.Store<StoreType>({})

bernhardwaidacher on Jun 22, 2019