Mocking Pinia Store in Vitest Component Test
I would like to test my Nuxt3 component with vitest and nuxt/test-utils. This component uses a Pinia store.
Component (simplified):
Store (simplified):
I've now tried to test it as described on the Pina page about testing.
Test:
Both assertions fail, the first one with
Component (simplified):
<template>
<Foo :leagues="allLeagues" />
</template>
<script setup lang="ts">
const leagueStore = useLeagueStore();
const { retrieveAllLeagues } = leagueStore;
const { allLeagues } = storeToRefs(leagueStore);
await callOnce(retrieveAllLeagues);
</script><template>
<Foo :leagues="allLeagues" />
</template>
<script setup lang="ts">
const leagueStore = useLeagueStore();
const { retrieveAllLeagues } = leagueStore;
const { allLeagues } = storeToRefs(leagueStore);
await callOnce(retrieveAllLeagues);
</script>Store (simplified):
import { useBackend } from '~/composable/useBackend';
import { type League } from '~/utils/models/league';
import type { ComputedRef } from 'vue';
export const useLeagueStore = defineStore('leagueStore', () => {
const allLeagues = ref<League[]>();
const retrieveAllLeagues = async (): Promise<void> => {
const { data } = await useBackend<League[]>('/v1/leagues');
allLeagues.value = data.value ?? undefined;
};
return {
allLeagues,
retrieveAllLeagues,
};
});import { useBackend } from '~/composable/useBackend';
import { type League } from '~/utils/models/league';
import type { ComputedRef } from 'vue';
export const useLeagueStore = defineStore('leagueStore', () => {
const allLeagues = ref<League[]>();
const retrieveAllLeagues = async (): Promise<void> => {
const { data } = await useBackend<League[]>('/v1/leagues');
allLeagues.value = data.value ?? undefined;
};
return {
allLeagues,
retrieveAllLeagues,
};
});I've now tried to test it as described on the Pina page about testing.
Test:
import { describe, expect, test } from 'vitest';
import { renderSuspended } from '@nuxt/test-utils/runtime';
import { screen, within } from '@testing-library/vue';
import { createTestingPinia } from '@pinia/testing';
describe('foo', () => {
const { _1, _2, _3 } = leagues;
test('bar', async () => {
const testingPinia = createTestingPinia();
const store = useLeagueStore(testingPinia);
store.allLeagues = [_1, _2, _3];
await renderSuspended(DashboardPage, {
global: { plugins: [testingPinia] },
});
expect(store.retrieveAllLeagues).toHaveBeenCalledOnce();
[_1, _2, _3].forEach(league => {
expect(screen.getByText(league.title)).toBeVisible();
});
});
});import { describe, expect, test } from 'vitest';
import { renderSuspended } from '@nuxt/test-utils/runtime';
import { screen, within } from '@testing-library/vue';
import { createTestingPinia } from '@pinia/testing';
describe('foo', () => {
const { _1, _2, _3 } = leagues;
test('bar', async () => {
const testingPinia = createTestingPinia();
const store = useLeagueStore(testingPinia);
store.allLeagues = [_1, _2, _3];
await renderSuspended(DashboardPage, {
global: { plugins: [testingPinia] },
});
expect(store.retrieveAllLeagues).toHaveBeenCalledOnce();
[_1, _2, _3].forEach(league => {
expect(screen.getByText(league.title)).toBeVisible();
});
});
});Both assertions fail, the first one with
AssertionError: expected "spy" to be called once, but got 0 timesAssertionError: expected "spy" to be called once, but got 0 times. Its like my component does not pick up the testing Pinia instance for some reason.