miracoly Posts - Answer Overflow

miracoly

•Created by miracoly on 4/24/2024 in #❓・help

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):

<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 times. Its like my component does not pick up the testing Pinia instance for some reason.

2 replies

Gaming

Programming