Mock return value of Store function/action

[PatrikBird]

Hi,

I red the Pinia docs, as well as the examples in the pinia/testing repo and I still have no idea how to return a mocked value from a Store function.

Why? - I have some Component tests which rely on some functions from the store to return certain values, I'd like to specify those return values and feed them to my Component test.

export const useMyStore = defineStore("myStore", () => {
  function mockMe() {}
});

The line below should illustrate what I'm trying to achieve

myStore.mockMe().mockImplementation(() => "myMockedReturnValue");

I also tried using the InitialState object of createTestingPinia.. no success though.

Help appreciated!
Btw.: I'm using Jest 26, Vue 3, Pinia 2

Cheers, Patrik

[gustavo-capim]

Hello @PatrikBird and folks,

I've got the same problem here.

Any help would be really appreciated!

Thanks,
Gustavo

[posva]

You need to return the action and call mockImplementation on the function itself: store.mockMe.mock implementation()

[PatrikBird]

thanks for you reply, posva! The mentioned function is called during script setup and therefore it fails during mount (it returns undefined as it's stubbed by default I guess) Is there a way to mock the return value before mounting it or how can I accomplish this?
edit: same question in #1388

[posva]

you stub it before mounting by calling const store = useStore() in your test

[marina-mosti]

@posva I may be confused, but doesn't that trigger a warning that no Pinia is yet installed? Calling useStore before the mounting means no plugins: [ testingPinia ] has yet been declared. Asking because we are having a sort of similar problem #1388 (reply in thread) and a proposed hacky solution

[posva]

You can create the testing pinia outside and pass it to useStore():

const pinia = createTestingPinia()

useStore(pinia)

mount(Component, { global: { plugins: [pinia] }})

[technimakri]

Just to give an example of how I implemented this with my factory function in vitest, as it wasn't really clear to me:

function createMyComponentWrapper(options = {}) {
    const pinia = createTestingPinia();
    const counterStore = useCounterStore(pinia);
    // Use vi.mocked for typescript support
    vi.mocked(counterStore.incrementCounter).mockReturnValue(3);
    return mount(MyComponent, {
        global: {
            plugins: [pinia],
        },
        ...options,
    });
}