How do I mock a store in Vitest?

[unikitty37]

I'm trying to write a component test for a LoginLogout component, which depends on the user store. The store exports various getters, but the two relevant for the test are isAnonymous (defaults to true) and user (defaults to a user with an empty username).

The component has this (login/logout buttons removed for clarity:)

  {#if $isAnonymous}
    Logged out
  {:else}
    <span class="username" data-testid="currently-logged-in-user">
      Logged in as {$user.username}
    </span>
  {/if}

I can test the "user is logged out" case just fine, because it's the default — but how do I mock the store for the "user is logged in" case, such that $isAnonymous returns false, and $user.username returns the username of the test user?

I've tried testing a wrapper component, based on #1485 (comment), but I can't get it to work — the user still shows as logged out.

<script lang="ts">
  import { setContext } from 'svelte'
  import * as userStore from '$stores/user'
  import { readable } from 'svelte/store'

  import LoginLogout from './LoginLogout.svelte'

  export let isAnonymous = true
  export let user = {
    email: '[email protected]',
    id: 'userid',
    userLevel: 'admin',
    username: 'user'
  }

  const store = {
    ...userStore,
    isAnonymous: readable(isAnonymous),
    user: readable(user),
  }

  setContext('__svelte__', {
    user: store,
  })
</script>

<LoginLogout />

I can't find a documented way of doing this, but surely it must be possible.

I don't want to have to mock the API calls that are made to log in and get the current user, as that means the component test is effectively testing the store as well as the thing it's supposed to be testing — mocking the store so it returns the correct values for the context is the cleanest way of doing this. (I'm also not 100% sure that mocking the API calls will work either…)

[vekunz]

We are mocking all of our stores, too. We use the same pattern for every store.

We would mock a boolean $isAnonymous store this way:

File: mock-store.ts

import { writable } from 'svelte/store';

const mockIsAnonymousWritable = writable<boolean>();

export const mockIsAnonymousStore = {
  subscribe: mockIsAnonymousWritable.subscribe,
  set: vi.fn(), // add as much store functions you need here and set them to vi.fn(), so you can call expect() functions on them
  mockSetSubscribeValue: (value: boolean): void => mockIsAnonymousWritable.set(value)
};

In the test now you can just mock the real store with the mockStore. With mockIsAnonymousStore.mockSetSubscribeValue(...) you can set the value of the mocked store.

[unikitty37]

Thanks — but both $isAnonymous and $user are part of $stores/user.ts, which is imported by the component under test. I'm still not sure I'm actually setting the mock up correctly so that these are replaced by the mock, since I seem to get the defaults from the store no matter what I do.

What would I put in the test so that, when the component calls import { user, isAnonymous } from '$stores/user', it gets the mocks instead?

[unikitty37]

Thanks — that's what was missing.

It's interesting that you have to have the mocks imported from a separate file; if you put them in the test file itself, Vitest complains about the use of top-level variables because it uses hoisting (and gives you a link to a doc page which doesn't actually seem to help at all with the problem, or use the word "hoist" once!) Once I got that sorted, it worked.

Thanks again!

[vekunz]

Yes, you have to import such things from other files. This page https://vitest.dev/api/vi.html#vi-mock describes this a bit.

[eliasdefaria]

Hey all, following up on this thread - even when I place my stores in a nother file then import them for use in vi.mock, I still run into the hoisted issue. Here's a brief snippet:

import { lineageSearchStore } from '../../mocks/lineageSearchStore.mock';
beforeAll(() => {
    vi.mock('../../../src/routes/catalog/lineage/[project]/search.store', async () => {
        return {
            lineageSearchStore: lineageSearchStore
        }
    });
});

When I do a dynamic import within the vi.mock it works:

beforeAll(() => {
    vi.mock('../../../src/routes/catalog/lineage/[project]/search.store', async () => {
        const { lineageSearchStore } = await import('../../mocks/lineageSearchStore.mock');
        return {
            lineageSearchStore: lineageSearchStore
        }
    });
});

However, then I'm unable to access the store value in my tests. Any insights on what I might be doing wrong here? Thanks for your help

[vekunz]

Yeah, the 'import' and 'hoisted' stuff got much worse in the last view releases. We now often use the relativly new vi.hoisted function for such things (because often we need the imported mocks in the tests itself also).

const { lineageSearchStore } = await vi.hoisted(() => import('../../mocks/lineageSearchStore.mock'));

beforeAll(() => {
    vi.mock('../../../src/routes/catalog/lineage/[project]/search.store', async () => {
        return {
            lineageSearchStore: lineageSearchStore
        }
    });
});

[eliasdefaria]

Ahhh that's the pattern. Thanks so much for the prompt response! That works well