Search code examples
typescriptvue.jsjestjsvuexquasar

Getting `Expected 4 arguments, but got 1` when trying to use a vuex getter with typescript


I am trying to unit test a getter and I get the error Expected 4 arguments, but got 1. when trying to use said getter. I used quasar to build out the app and I am using typescript.

HttpMocks.mockToken is just a generic JWT string

const getters: GetterTree<AuthenticationStateInterface, StateInterface> = {
  token(state: AuthenticationStateInterface) {
    return state.token;
  }
};

export default getters;

Here is how im trying to test the getter

 describe('Getters', () => {
    it('Token', () => {
      const state = {
        token: HttpMocks.mockToken
      };
      const result = getters.token(state) // Expected 4 arguments, but got 1.
    });
  });

State

export interface AuthenticationStateInterface {
  token: string;
  expires: string;
  error?: string;
}

const state: AuthenticationStateInterface = {
  token: '',
  expires: '',
  error: ''
};

export default state;

Solution

  • Problem was just I wasn't following the getter's signature.

    export type Getter<S, R> = (state: S, getters: any, rootState: R, rootGetters: any) => any;
    

    I just had to fill in the blanks, so I have this when calling the getter in a test

    const result = getters.token(authenticationState, {}, rootState, {});
    

    rootState is just a mocked version of the entire state and authenticationState is a mock of the local module state