Mocking store with vitest and composition API

[lukasz-madon]

I have a simple AdsView.vue that I'd like to test

<template>
  <Layout>
    ...
    <div v-for="item in ads" :key="item.id"
    ....
   </Layout>
</template>
<script setup>



const fetchAds = async () => {
   const response = await apiClient.get("/ad", { params: params })
...

onMounted(async () => {
  params.status = route.query.status || "approved"
  params.filter = route.query.filter || ""
  await fetchAds()
})
</script>

My test code

import { it, describe, expect, vi, beforeEach } from 'vitest';
import { shallowMount, mount } from '@vue/test-utils'
import { setActivePinia, createPinia } from 'pinia'
import { createTestingPinia } from '@pinia/testing'
import { useStyleStore } from "@/stores/style";
import { useRoute } from 'vue-router'

import AdsView from '@/views/AdsView.vue'


vi.mock('vue-router')
// vi.mock('@/stores/style', () => ({
//   useStyleStore: () => ({
//     darkMode: true,
//   }),
// }));


describe('AdsView', () => {
  (useRoute as any).mockReturnValue({
    query: {
    },
  })

  const testingPinia = createTestingPinia({
    createSpy: vi.fn(),
    initialState: {
      style: {
        darMode: true,
      },
    },
  })


  beforeEach(() => {
    // creates a fresh pinia and make it active so it's automatically picked
    // up by any useStore() call without having to pass it to it:
    // `useStore(pinia)`
    // setActivePinia(createPinia())
    // const styleStore = useStyleStore();
  })

  it('renders the correct markup', () => {
    const wrapper = shallowMount(AdsView)
    expect(wrapper.html()).toBeTruthy()
  })

  it('fetches ads on mount', async () => {
    const fetchAdsMock = vi.fn().mockResolvedValue({ data: [{ id: 1, title: 'Ad 1' }, { id: 2, title: 'Ad 2' }] });
    const wrapper = mount(AdsView, {
      mocks: {
        $http: {
          get: fetchAdsMock,
        },
      },
      global: {
        plugins: [testingPinia],
      },
    });

    // Wait for the component to render
    await wrapper.vm.$nextTick();

    // Assert that the ads were fetched and rendered
    expect(fetchAdsMock).toHaveBeenCalled();
    expect(wrapper.find('.ad')).toHaveLength(2);
  });
})

I'm trying to get it working but I keep getting

TypeError: Cannot read properties of undefined (reading 'darkMode')
 ❯ Proxy._sfc_render layouts/Layout.vue:82:38
     81|   <div
     82|     :class="{
     83|       dark: styleStore.darkMode,

The store is simple

export const useStyleStore = defineStore("style", {
  state: () => ({
    /* Styles */
    navBarItemLabelActiveColorStyle: "",
    overlayStyle: "",

    /* Dark mode */
    darkMode: true,
  }),
...

How to mock my style store? I tried vi.mock, pinia/testing plugin, changing paths. What am I missing?

[atcha]

I have exactly the same problem and don't how to solve this.
My store is also undefined.

[karolisw]

I found a solution using the vuex docs. Perhaps it could be of help?
https://vuex.vuejs.org/guide/testing.html#testing-mutations

[hephi808]

Have you check the typo? you use darMode in createTestingPinia but inside the store is darkMode

const testingPinia = createTestingPinia({
    createSpy: vi.fn(),
    initialState: {
      style: {
        darMode: true,
      },
    },
  })

and

export const useStyleStore = defineStore("style", {
  state: () => ({
    /* Styles */
    navBarItemLabelActiveColorStyle: "",
    overlayStyle: "",

    /* Dark mode */
    darkMode: true,
  }),
...

[mihalcea-bogdan-daniel]

In my particular situation, I encountered a plugin error that was not properly registered in the global.plugins:[“someMissingPlugin”]. As a result, this led to an undefined error, despite it not being related to a store error.
TypeError: Cannot read properties of undefined (reading 'forms') - this had nothing to do with the error, the error was coming from another undefined function, hence the store was not defined.