Mocking getters using TypeScript and Composition API

[felixzapata]

Hi all, I have this store:

const useCustomStore = defineStore('main', () => {
  const ready = computed(() => {
    return false;
  });
  const current = ref<MyType>({
    foo: { bar: '' },
  });

  return {
    current,
    ready,
  };
});

type CustomStore = ReturnType<typeof useCustomStore>;

export {
  useCustomStore,
};

export type { CustomStore };

How can I mock for each test the value of the getter (computed property)? As far as I know, inside a store using composition API with script setup, the computed properties act as getters.

const wrapper = mount(MyComponent, {
      global: {
        plugins: [
          createTestingPinia({
            createSpy: vi.fn(),
            initialState: {
              main: {
                ready: computed(() => {
                  return true;
                }),
                foo: {
                  bar: 'custom',
                },
              },
            },
          }),
        ],
      },
    });

My test works fine reading the custom value from the fake store but I was not able to mock the getter writing the store the way I show you.

I assume does not work because this function only merges reactive properties.

[th1nkgr33n]

I think the initialState property is really just for the "state" so in your case "current".

The Getter (in your case the computed) needs to be overwritten inside the tests itself like this.
There is a small hint inside the docs: https://pinia.vuejs.org/cookbook/testing.html#mocking-getters

import { afterEach, beforeEach, describe, test, vi } from 'vitest'
import { getActivePinia } from 'pinia'
import { createTestingPinia } from '@pinia/testing';
import { useCustomStore} from '~/store/custom.store'
import { cleanup, render } from '@testing-library/vue'


describe('Some Test Suite', () => {
  let customStore: any
  let testingPinia: any

  beforeAll(() => {
    testingPinia = createTestingPinia({
      createSpy: vi.fn(),
      initialState: {
        main: {
          current: { foo: { bar: 'ecosystem'}},
        },
      },
    })

  });

  beforeEach(() => {
    customStore = useCustomStore(testingPinia);

    // handle actions from store (context = all tests)
    customStore.storeAction = vi.fn()

    // handle getter from store (context = all tests)
    customStore.ready = true
  });

  afterEach(() => {
    cleanup()
  })

  test('Should test something', async () => {
    // handle actions from store (context = single test)
    customStore.storeAction = vi.fn()
    
    // handle getter from store (context = single test)
    customStore.ready = true
    // Although there might be a TS error, this is the only possible solution to overwrite the getter

    const wrapper = render(MyComponent, {
      global: { plugins: [testingPinia] },
    });
  })
})

I hope this helps