Using store types & typing initialState inside of tests

[Sensanaty]

I'm running into a situation where testing is becoming a tad annoying, since we lose all type information in test setups when using initialState.

What I've opted for is a custom type that lets me assert the type for each individual store, however this is quite cumbersome as the type isn't very legible and results in a lot of unnecessary info that is hard to debug. It also involves importing each store that is being configured, even if they're not used inside the tests themselves which is sometimes the case (for example, a config store that determines some behavior in a component but doesn't get changed in the component).

My solution looks something like this

import { defineStore } from 'pinia';

type Store<T extends (...args: unknown[]) => unknown> = Omit<
  ReturnType<T>,
  keyof ReturnType<typeof defineStore>
>

Then in tests where I need to setup some pinia state

import useMyStore from '@/stores/myStore.ts';

pinia = createTestingPinia({
  initialState: {
    myStore: {} as Store<typeof useMyStore>,
  },
});

This does work, however the type itself ends up being super complex and basically impossible to understand.

What I did is add a key, THIS_SHOULDNT_BE_HERE: boolean to the initialState, like so:

pinia = createTestingPinia({
  initialState: {
    myStore: { THIS_SHOULDNT_BE_HERE: true } as Store<typeof useMyStore>,
  },
});

This is the resulting type error I get:

Vue: Conversion of type
{   THIS_SHOULDNT_BE_HERE: boolean;   plan: BillingPlan; }
to type
Store<StoreDefinition<"billing", _UnwrapAll<Pick<{ plan: Ref<{ readonly plan?: string; readonly level?: 2 | 3 | 1 | 4; readonly tier: "tier0" | "tier1" | "tier2" | "tier3"; readonly period: "monthly" | "yearly"; }>; shouldShowUpgradePlanBanner: ComputedRef<...>; setupBillingStore: () => Promise<...>; }, "plan">>, Pi...
may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to unknown first.
Type
{   THIS_SHOULDNT_BE_HERE: boolean;   plan: BillingPlan; }
is missing the following properties from type
Store<StoreDefinition<"billing", _UnwrapAll<Pick<{ plan: Ref<{ readonly plan?: string; readonly level?: 2 | 3 | 1 | 4; readonly tier: "tier0" | "tier1" | "tier2" | "tier3"; readonly period: "monthly" | "yearly"; }>; shouldShowUpgradePlanBanner: ComputedRef<...>; setupBillingStore: () => Promise<...>; }, "plan">>, Pi...
: $state, $patch, $reset, $subscribe, and 5 more.

Perhaps I'm just bad at reading/parsing TS errors, but to me this is completely illegible, and if I weren't the one that implemented the Store type, I'd have absolutely no clue what was going on here and I'd have no idea how to fix it.

Is there a better solution that I'm perhaps missing here? The reason I want to have these typed is so we can catch situations where, for example, a store's state type gets changed, and the one in initialData is no longer being set. Sure, you would probably catch this during the test run, but I'd rather TS itself pick it up for me and warn me before I ever even have to run any tests.

---

An alternative option could be to simply expose in each store an interface/type that would match the state, however this is very manual and repetitive, and if you're using CompAPI syntax for your stores rather than the OptionsAPI syntax, it's also a pretty annoying pattern.

What I mean is this

// myStore.ts - CompAPI

export interface MyStore {
  myState: number,
  myOtherState: boolean,
}

const useMyStore = defineStore('myStore', () => {
  const myState = ref<MyStore['myState']>(0);
  const myOtherState = ref<MyStore['myOtherState']>(true);

  return { myState, myOtherState }
})

export default useMyStore;

This is IMO not a great solution, especially if the pieces of state are of more complex types themselves.

So I'm curious, is there a good solution for this?