I can't get Gettters mocking to work....

[fermaud]

Hi,
I can't find a way to make getters mocking to work here is my code.

import { createTestingPinia } from '@pinia/testing';
import { setActivePinia, createPinia, defineStore } from 'pinia';

const useCounter = defineStore('newStore', {
  state: () => ({ firstName: 'Tom', lastName: 'Hanks' }),
  getters: {
    getFirstName(state) {
      return state.firstName;
    },
    getLastName(state) {
      return state.lastName;
    },
    getFullName(state) {
      return `${state.getFirstName} ${state.getLastName}`;
    },
  },
  actions: {
    updateUserFirstName(firstName) {
      this.firstName = firstName;
    },
    updateUserLastName(lastName) {
      this.lastName = lastName;
    },
    updateUserName(firstName, lastName) {
      this.updateUserFirstName(firstName);
      this.updateUserLastName(lastName);
    },
  },
});

describe('Counter Store', () => {
  it('update user names', () => {
    const pinia = createTestingPinia({ stubActions: false });
    const counter = useCounter(pinia);
    counter.updateUserName('John', 'Doe');
    expect(counter.updateUserFirstName).toHaveBeenCalledTimes(1);
  });
  it('get full name', () => {
    const pinia = createTestingPinia();
    const counter = useCounter(pinia);
    console.log(counter.getFirstName); // = Tom
    counter.getFirstName = 'Rob';
    console.log(counter.getFirstName); // = Tom and not Rob...
    expect(counter.getFullName).toBe('Rob Hanks');
  });
});

[posva]

• You don't need getters that return state, just use the state directly and remove the getters
• state in getters is just state, not getters, so it should bestate.firstName not state.getFirstName
• You don't need actions to mutate the state, just change it directly. You can remove setFirstName
• Most of the time, you don't use the testing pinia for unit testing stores, you use it to unit test components that use stores

Example:

import { createTestingPinia } from '@pinia/testing';
import { setActivePinia, createPinia, defineStore } from 'pinia';

const useCounter = defineStore('newStore', {
  state: () => ({ firstName: 'Tom', lastName: 'Hanks' }),
  getters: {
    getFullName(state) {
      return `${state.firstName} ${state.lastName}`;
    },
  },
  actions: {
    updateUserName(firstName, lastName) {
      this.firstName = firstName
      this.lastName = lastName
    },
  },
});


  it('get full name', () => {
    const counter = useCounter(createPinia());

    counter.firstName = 'Rob';
    expect(counter.getFullName).toBe('Rob Hanks');
  });
});

Note that getters mocking doesn't work on Vue 2 #1201

[fermaud]

Thank you for your answer, actually that was just an example with simple (useless) getters and actions. I didn't know that mocking getters doesn't work on Vue 2.