I have a component and a Pinia store that contains state and some operations. The code runs perfectly fine in browser and E2E (cypress) tests, but fails in unit tests. I'm using vue-testing-utils and vitest.

Calling a stored function from a unit test works fine when a button is clicked, but if the function is in an installed or main script, the test fails

src/components/UsersComponent.vue

src/stores/users.store.js

import { defineStore } from 'pinia' import { usersAPI } from '@/gateways' export const useUsersStore = defineStore({ id: 'users', persist: true, state: () => ({ status: 'ready', }), getters: {}, actions: { resetStatus() { this.status = 'ready' }, changeStatus() { this.status = 'loading' }, }, })

src/components/Test/UsersComponent.spec.js

import { describe, it, expect, vi, beforeEach } from 'vitest' import { mount } from '@vue/test-utils' import { createTestingPinia } from '@pinia/testing' import UsersComponent from '@/components/UsersComponent.vue' import { useUsersStore } from '@/stores/users.store' const wrapper = mount(UsersComponent, { global: { plugins: [createTestingPinia({ createSpy: vi.fn() })], }, }) const usersStore = useUsersStore() describe('UsersComponent', () => { it('store function is called', async () => { // arrange const spy = vi.spyOn(usersStore, 'resetStatus') const button = wrapper.find('button') // act await button.trigger('click') // assert expect(spy).toHaveBeenCalled() }) })

Unit test returns 2 different errors. The first is the console log when the function tries to run inonMounted()and the second is what vitest returns.

stderr | unknown test [Vue warn]: Unhandled error during execution of mounted hook at  at 

FAIL src/components/__tests__/UsersComponent.spec.js [ src/components/__tests__/UsersComponent.spec.js ] TypeError: usersStore.resetStatus is not a function ❯ src/components/UsersComponent.vue:16:14 16| 17|