Vitest with Pinia doesn't call action's store in onMounted hook.

[ffvaz]

Component

<template>
Hello
</template>

<script setup>
  import { onMounted } from 'vue'
  import { useListasSumariasStore } from '@/stores/listasSumarias'

  const listasSumariasStore = useListasSumariasStore()

  onMounted(() => {
    listasSumariasStore.recuperarListasEmElaboracao()
  })
</script>

Store

import { defineStore } from 'pinia'

export const useListasSumariasStore = defineStore({

  id: 'listas',
  state: () => ({
    listas: []
  }),

  actions: {
    recuperarListasEmElaboracao() {
      console.log('recuperarListasEmElaboracao()')
    }
  }
})

Test

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import { createTestingPinia } from '@pinia/testing'
import ListasSumarias from '../ListasSumarias.vue'

describe('ListasSumarias', () => {  
  it('renders properly', async () => {

    const wrapper = mount(ListasSumarias, {
      global: {
          plugins: [createTestingPinia()]
      }
    })

    expect(wrapper.text()).toContain('Hello')
  })
})

---

The action "recuperarListasEmElaboracao()" isn't called.
What am I doing wrong?

[posva]

Actions are stubbed by default: https://pinia.vuejs.org/api/interfaces/pinia_testing.TestingOptions.html#stubactions

[benazir-sba]

Setting stubActions to false is not working for me. I am mocking my store (inside a composable unit test) in the following way:

vi.mock("@/stores/responseStore", () => {
  const mockedResponseStore = vi.fn(() => ({
    responseForm: undefined,
    updateResponse: vi.fn(),
  }))

  return {
    default: mockedResponseStore,
  }
})

Then in my test I am creating test pinia with stubActions set to false and assigning that pinia instance to my store. Inside my putResponse function a store action updateResponse is called. But in the test the expectation expect(responseStore.updateResponse).toHaveBeenCalledTimes(1) fails with the error: AssertionError: expected "spy" to be called 1 times, but got 0 times

 it("updates response with correct values", async () => {
    const pinia = createTestingPinia({
      createSpy: vi.fn,
      stubActions: false,
    })
    const responseStore = useResponseStore(pinia)

    await flushPromises()
    await putResponse(testCurrentResponseOne)

    expect(mockedCoco.putServiceProviderResponse).toBeCalledTimes(1)
    expect(responseStore.updateResponse).toHaveBeenCalledTimes(1)
  })

I am stuck here for quite some time now. Please tell me what am i doing wrong here ? Thanks!

[mityaua]

I had the same situation and this is what helped me - just write store = useSomeStore() after component mount.

import { createTestingPinia } from "@pinia/testing";
import { useSomeStore} from "@/stores/someStore";

describe("MyPage component", () => {
	let wrapper: VueWrapper<any>;
	let store: ReturnType<typeof useSomeStore>;

	beforeEach(() => {
		vi.clearAllMocks();

		wrapper = shallowMount(MyPage, {
			global: {
				plugins: [createTestingPinia()]
			},
		});

		store = useSomeStore();
	});

	it("Should call loadSomeDate on onMounted hook", () => {
		// Act
               // Some additional mocks, for example currentRoute
		wrapper = shallowMount(MyPage, {
			global: {
				plugins: [createTestingPinia()]
			},
		});

		store = useSomeStore(); // It helps me!**

		// Assert
		expect(store .loadSomeDate).toHaveBeenCalled();
	});