Allow bypassing getters in `@pinia/testing`

• From https://github.com/vuejs/pinia/discussions/944

There should be a way to bypass any getter when testing components that use a store.

Some Ideas:

• use the createTestingPinia() to add a plugin that allows modifying any getter:

  // in a test
  const store = useStore()
  store.myGetter // getter computed value
  store.myGetter = newvalue
  store.myGetter // newvalue
  

• Maybe a different way to pass options specific to stores:

  createTestingPinia({ overrides: [
    [useSomeStore, { getters: { /* autocompletion */ stuff: ... }}]
  ] })
  

[JJBocanegra]

This isn’t working properly with Typescript.

// store.ts
import { defineStore } from 'pinia';

export const useStore = defineStore('store', {
  getters: {
    foo: () => true,
  },
});

// test.ts
import { createTestingPinia } from '@pinia/testing';
import { useStore } from 'store.ts';

describe('Test', () => {
  const pinia = createTestingPinia();
  const store = useStore(pinia);

  // Error TS2540: Cannot assign to ' foo' because it is a read-only property
  store.foo = false;
});

To fix this I needed to add the next line just above each getter modification

 // @ts-expect-error: Getter is read only

Versions

• typescript: 4.7.3
• pinia: 2.0.16
• @pinia/testing: 0.0.12

[bodograumann]

I am doing the following now (latest version 2.0.17):

type Mocked<T> = { [P in keyof T]: ReturnType<typeof jest.fn> };
function mocked<Id extends string, S, G, A>(store: Store<Id, S, G, A>): S & UnwrapRef<G> & Mocked<A> {
  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment -- the new type is due to `app.use(createTestingPinia())` */
  //@ts-ignore
  return store;
}

describe('Test', () => {
  const pinia = createTestingPinia();
  const store = mocked(useStore(pinia));

  store.foo = false;
});