I was recently making minor code changes and noticed I broke the unit tests with my updates. I ran into the following error:
FAIL tests/unit/router/guards.spec.ts [ tests/unit/router/guards.spec.ts ]
Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help.
This will fail in production.
What triggered the unit test failure left me stumped longer than I care to admit, so I figured I’d write up this quick blog post to ensure I never make the same mistake again.
The Scenario
I was making changes to my Vue Router’s navigation guard.ts
file. There was a reference to a store and I noticed it was used in more than on location and foolishly thought it would be a good idea to move the variable declaration outside of the function so it could be used more than once.
Before
import { useGenericStore } from '@/stores';
export const genericGuard = () => {
const genericStore = useGenericStore();
// other code
};
After
import { useGenericStore } from '@/stores';
const genericStore = useGenericStore();
export const genericGuard = () => {
// other code
};
The Problem
By moving the declaration of genericStore
outside of the individual function blocks, I ensured it was being called before Pinia was being activated, hence the error.
Now this should have been a really quick catch, but the change was made among several other changes. I mistakenly assumed on of those other changes were the culprit. If I took the time to carefully read the error message and navigate to the helpful link provided, I would have easily deduced the culprit was trying to reference useGenericStore()
outside of the guard
function blocks.
Useful Links
The following are useful links I came across as I was trying to troubleshoot my problem:
- getActivePinia was called with no active Pinia. Did you forget to install pinia?
- Using a store outside of a component