Can't pass Store type in RenderOptions interface and render function #266
Description
Describe the bug A clear and concise description of what the bug is.
Currently, when using this package, it always assumes that the store is of type any. And in 5.6.2 that we're using it's hardcoded to be {} by default with no option to override:
This is from 5.6.2:
export function render<V extends Vue>( options?: RenderOptions<V>, //... ): RenderResult export interface RenderOptions<V extends Vue, S = {}> { store?: StoreOptions<S> // ... }And in the most recent types, it's just type Store = any and then store?: Store, so no way to override.
To Reproduce Steps to reproduce the behavior:
I have this helper function for rendering components for tests:
export const renderHelper = ( parameter: Parameters<typeof tsx.component>[0], // TODO: use Instantiation Expression to use Parameters<typeof render<Vue, typeof store.state>> https://github.com/microsoft/TypeScript/pull/47607 renderOptions: RenderOptions<Vue, typeof storeObject.state> = {} ): ReturnType<typeof render> => render(VApp, { routes, vuetify: new Vuetify(), slots: { default: tsx.component(parameter), }, store: storeObject, ...renderOptions, });And without patch, it throws error:
Type '{ state: { activeTopLevelMenuItem: "dashboard" | "contentSetup" | "processingQueue" | "templates" | "consumers"; activeContentSetupTab: "contentDefinition" | "contentConsumers" | "versions"; ... 11 more ...; newLibraryItemName: string; }; mutations: MutationTree<...>; actions: ActionTree<...>; modules: ModuleTree<.....' is not assignable to type 'StoreOptions<{}>'. Types of property 'actions' are incompatible. Type 'ActionTree<{ activeTopLevelMenuItem: "dashboard" | "contentSetup" | "processingQueue" | "templates" | "consumers"; activeContentSetupTab: "contentDefinition" | "contentConsumers" | "versions"; ... 11 more ...; newLibraryItemName: string; }, { ...; }>' is not assignable to type 'ActionTree<{}, {}>'. Type '{}' is missing the following properties from type '{ activeTopLevelMenuItem: "dashboard" | "contentSetup" | "processingQueue" | "templates" | "consumers"; activeContentSetupTab: "contentDefinition" | "contentConsumers" | "versions"; ... 11 more ...; newLibraryItemName: string; }': activeTopLevelMenuItem, activeContentSetupTab, activeContentDefinitionTab, activeLibraryItemPk, and 10 more.ts(2322) Expected behavior
I expect to be able to specify Store type, which is possible with this patch:
diff --git a/node_modules/@testing-library/vue/types/index.d.ts b/node_modules/@testing-library/vue/types/index.d.ts index cedc534..ad47510 100644 --- a/node_modules/@testing-library/vue/types/index.d.ts +++ b/node_modules/@testing-library/vue/types/index.d.ts @@ -57,9 +57,9 @@ export type ConfigurationCallback<V extends Vue> = | ((...args: ConfigurationArgs) => Partial<ThisTypedMountOptions<V>>) | ((...args: ConfigurationArgs) => void) -export function render<V extends Vue>( +export function render<V extends Vue, S>( TestComponent: VueClass<V> | ComponentOptions<V>, - options?: RenderOptions<V>, + options?: RenderOptions<V, S>, configure?: ConfigurationCallback<V>, ): RenderResultRelated information:
@testing-library/vueversion: 5.6.2Vueversion: 2.6.14nodeversion: 16.13.0npm(oryarn) version: 8.1.0
Relevant code or config (if any)
I also have this patch for vuex to use our store object type:
diff --git a/node_modules/vuex/types/vue.d.ts b/node_modules/vuex/types/vue.d.ts index 302fc4e..dcc5fb4 100644 --- a/node_modules/vuex/types/vue.d.ts +++ b/node_modules/vuex/types/vue.d.ts @@ -3,16 +3,17 @@ */ import Vue, { ComponentOptions } from "vue"; +import { store } from "../../../src/store"; import { Store } from "./index"; declare module "vue/types/options" { interface ComponentOptions<V extends Vue> { - store?: Store<any>; + store?: Store<typeof store.state>; } } declare module "vue/types/vue" { interface Vue { - $store: Store<any>; + $store: Store<typeof store.state>; } }both patches are applied using patch-package npm package in postinstall script.