Can't pass Store type in RenderOptions interface and render function

[Maxim-Mazurok]

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>,
 ): RenderResult

Related information:

• @testing-library/vue version: 5.6.2
• Vue version: 2.6.14
• node version: 16.13.0
• npm (or yarn) 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.

[afontcu]

hey! that makes quite sense. Fancy to open up a PR with the fix?

[Maxim-Mazurok]

hey! that makes quite sense. Fancy to open up a PR with the fix?

I believe that my colleague @esyw has one on the way :)

[github-actions[bot]]

:tada: This issue has been resolved in version 5.8.3 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This issue has been resolved in version 6.6.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This issue has been resolved in version 5.8.3 :tada:

The release is available on:

• npm package (@release-5.x dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: