diff --git a/packages/playwright-ct-react/hooks.d.ts b/packages/playwright-ct-react/hooks.d.ts
index 94e83bc9af..aa4680694a 100644
--- a/packages/playwright-ct-react/hooks.d.ts
+++ b/packages/playwright-ct-react/hooks.d.ts
@@ -18,5 +18,9 @@ type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
-export declare function beforeMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void;
-export declare function afterMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void;
+export declare function beforeMount<HooksConfig extends JsonObject>(
+  callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
+): void;
+export declare function afterMount<HooksConfig extends JsonObject>(
+  callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
+): void;
diff --git a/packages/playwright-ct-react/index.d.ts b/packages/playwright-ct-react/index.d.ts
index 4b30d4b4c2..8f06efc53e 100644
--- a/packages/playwright-ct-react/index.d.ts
+++ b/packages/playwright-ct-react/index.d.ts
@@ -27,11 +27,11 @@ import type { InlineConfig } from 'vite';
 
 export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   use?: BasePlaywrightTestConfig['use'] & {
-    ctPort?: number,
-    ctTemplateDir?: string,
-    ctCacheDir?: string,
-    ctViteConfig?: InlineConfig
-  }
+    ctPort?: number;
+    ctTemplateDir?: string;
+    ctCacheDir?: string;
+    ctViteConfig?: InlineConfig;
+  };
 };
 
 type JsonPrimitive = string | number | boolean | null;
@@ -39,8 +39,8 @@ type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
 
-export interface MountOptions {
-  hooksConfig?: JsonObject;
+export interface MountOptions<HooksConfig extends JsonObject> {
+  hooksConfig?: HooksConfig;
 }
 
 interface MountResult extends Locator {
@@ -49,11 +49,15 @@ interface MountResult extends Locator {
 }
 
 export interface ComponentFixtures {
-  mount(component: JSX.Element, options?: MountOptions): Promise<MountResult>;
+  mount<HooksConfig extends JsonObject>(
+    component: JSX.Element,
+    options?: MountOptions<HooksConfig>
+  ): Promise<MountResult>;
 }
 
 export const test: TestType<
   PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
-  PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
+  PlaywrightWorkerArgs & PlaywrightWorkerOptions
+>;
 
 export { expect, devices } from '@playwright/test';
diff --git a/packages/playwright-ct-solid/hooks.d.ts b/packages/playwright-ct-solid/hooks.d.ts
index 94e83bc9af..aa4680694a 100644
--- a/packages/playwright-ct-solid/hooks.d.ts
+++ b/packages/playwright-ct-solid/hooks.d.ts
@@ -18,5 +18,9 @@ type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
-export declare function beforeMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void;
-export declare function afterMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void;
+export declare function beforeMount<HooksConfig extends JsonObject>(
+  callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
+): void;
+export declare function afterMount<HooksConfig extends JsonObject>(
+  callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
+): void;
diff --git a/packages/playwright-ct-solid/index.d.ts b/packages/playwright-ct-solid/index.d.ts
index a260249311..2b21976334 100644
--- a/packages/playwright-ct-solid/index.d.ts
+++ b/packages/playwright-ct-solid/index.d.ts
@@ -27,11 +27,11 @@ import type { InlineConfig } from 'vite';
 
 export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   use?: BasePlaywrightTestConfig['use'] & {
-    ctPort?: number,
-    ctTemplateDir?: string,
-    ctCacheDir?: string,
-    ctViteConfig?: InlineConfig
-  }
+    ctPort?: number;
+    ctTemplateDir?: string;
+    ctCacheDir?: string;
+    ctViteConfig?: InlineConfig;
+  };
 };
 
 type JsonPrimitive = string | number | boolean | null;
@@ -39,8 +39,8 @@ type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
 
-export interface MountOptions {
-  hooksConfig?: JsonObject;
+export interface MountOptions<HooksConfig extends JsonObject> {
+  hooksConfig?: HooksConfig;
 }
 
 interface MountResult extends Locator {
@@ -48,11 +48,15 @@ interface MountResult extends Locator {
 }
 
 export interface ComponentFixtures {
-  mount(component: JSX.Element, options?: MountOptions): Promise<MountResult>;
+  mount<HooksConfig extends JsonObject>(
+    component: JSX.Element,
+    options?: MountOptions<HooksConfig>
+  ): Promise<MountResult>;
 }
 
 export const test: TestType<
   PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
-  PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
+  PlaywrightWorkerArgs & PlaywrightWorkerOptions
+>;
 
 export { expect, devices } from '@playwright/test';
diff --git a/packages/playwright-ct-svelte/hooks.d.ts b/packages/playwright-ct-svelte/hooks.d.ts
index e6a3172d4c..8c0fa0933f 100644
--- a/packages/playwright-ct-svelte/hooks.d.ts
+++ b/packages/playwright-ct-svelte/hooks.d.ts
@@ -14,11 +14,18 @@
  * limitations under the License.
  */
 
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponent } from 'svelte';
 
 type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
-export declare function beforeMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void;
-export declare function afterMount(callback: (params: { hooksConfig: JsonObject, svelteComponent: SvelteComponent }) => Promise<void>): void;
+export declare function beforeMount<HooksConfig extends JsonObject>(
+  callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
+): void;
+export declare function afterMount<HooksConfig extends JsonObject>(
+  callback: (params: {
+    hooksConfig: HooksConfig;
+    svelteComponent: SvelteComponent;
+  }) => Promise<void>
+): void;
diff --git a/packages/playwright-ct-svelte/index.d.ts b/packages/playwright-ct-svelte/index.d.ts
index 31705a0997..99610f379b 100644
--- a/packages/playwright-ct-svelte/index.d.ts
+++ b/packages/playwright-ct-svelte/index.d.ts
@@ -24,15 +24,15 @@ import type {
   Locator,
 } from '@playwright/test';
 import type { InlineConfig } from 'vite';
-import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime'
+import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime';
 
 export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   use?: BasePlaywrightTestConfig['use'] & {
-    ctPort?: number,
-    ctTemplateDir?: string,
-    ctCacheDir?: string,
-    ctViteConfig?: InlineConfig
-  }
+    ctPort?: number;
+    ctTemplateDir?: string;
+    ctCacheDir?: string;
+    ctViteConfig?: InlineConfig;
+  };
 };
 
 type JsonPrimitive = string | number | boolean | null;
@@ -42,27 +42,36 @@ type JsonObject = { [Key in string]?: JsonValue };
 
 type Slot = string | string[];
 
-export interface MountOptions<Component extends SvelteComponent = SvelteComponent> {
+export interface MountOptions<
+  HooksConfig extends JsonObject,
+  Component extends SvelteComponent
+> {
   props?: ComponentProps<Component>;
   slots?: Record<string, Slot> & { default?: Slot };
   on?: Record<string, Function>;
-  hooksConfig?: JsonObject;
+  hooksConfig?: HooksConfig;
 }
 
 interface MountResult<Component extends SvelteComponent> extends Locator {
   unmount(): Promise<void>;
-  update(options: Omit<MountOptions<Component>, 'hooksConfig'|'slots'>): Promise<void>
+  update(
+    options: Omit<MountOptions<never, Component>, 'hooksConfig' | 'slots'>
+  ): Promise<void>;
 }
 
 interface ComponentFixtures {
-  mount<Component extends SvelteComponent>(
+  mount<
+    HooksConfig extends JsonObject,
+    Component extends SvelteComponent = SvelteComponent
+  >(
     component: new (...args: any[]) => Component,
-    options?: MountOptions<Component>
+    options?: MountOptions<HooksConfig, Component>
   ): Promise<MountResult<Component>>;
 }
 
 export const test: TestType<
   PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
-  PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
+  PlaywrightWorkerArgs & PlaywrightWorkerOptions
+>;
 
 export { expect, devices } from '@playwright/test';
diff --git a/packages/playwright-ct-vue/hooks.d.ts b/packages/playwright-ct-vue/hooks.d.ts
index 5879f5de70..6e2c3e1715 100644
--- a/packages/playwright-ct-vue/hooks.d.ts
+++ b/packages/playwright-ct-vue/hooks.d.ts
@@ -14,11 +14,19 @@
  * limitations under the License.
  */
 
-import { App, ComponentPublicInstance } from 'vue';
+import type { App, ComponentPublicInstance } from 'vue';
 
 type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
-export declare function beforeMount(callback: (params: { app: App, hooksConfig: JsonObject }) => Promise<void>): void;
-export declare function afterMount(callback: (params: { app: App, hooksConfig: JsonObject, instance: ComponentPublicInstance }) => Promise<void>): void;
+export declare function beforeMount<HooksConfig extends JsonObject>(
+  callback: (params: { app: App; hooksConfig: HooksConfig }) => Promise<void>
+): void;
+export declare function afterMount<HooksConfig extends JsonObject>(
+  callback: (params: {
+    app: App;
+    hooksConfig: HooksConfig;
+    instance: ComponentPublicInstance;
+  }) => Promise<void>
+): void;
diff --git a/packages/playwright-ct-vue/index.d.ts b/packages/playwright-ct-vue/index.d.ts
index 657e3b1131..af90311c09 100644
--- a/packages/playwright-ct-vue/index.d.ts
+++ b/packages/playwright-ct-vue/index.d.ts
@@ -27,11 +27,11 @@ import type { InlineConfig } from 'vite';
 
 export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   use?: BasePlaywrightTestConfig['use'] & {
-    ctPort?: number,
-    ctTemplateDir?: string,
-    ctCacheDir?: string,
-    ctViteConfig?: InlineConfig
-  }
+    ctPort?: number;
+    ctTemplateDir?: string;
+    ctCacheDir?: string;
+    ctViteConfig?: InlineConfig;
+  };
 };
 
 type JsonPrimitive = string | number | boolean | null;
@@ -41,31 +41,46 @@ type JsonObject = { [Key in string]?: JsonValue };
 
 type Slot = string | string[];
 
-export interface MountOptions<Props = Record<string, unknown>> {
+export interface MountOptions<
+HooksConfig extends JsonObject,
+Props extends Record<string, unknown>
+> {
   props?: Props;
   slots?: Record<string, Slot> & { default?: Slot };
   on?: Record<string, Function>;
-  hooksConfig?: JsonObject;
+  hooksConfig?: HooksConfig;
 }
 
-interface MountResult<Props = Record<string, unknown>> extends Locator {
+interface MountResult<
+  Props extends Record<string, unknown>
+> extends Locator {
   unmount(): Promise<void>;
-  update(options: Omit<MountOptions<Props>, 'hooksConfig'>): Promise<void>
+  update(options: Omit<MountOptions<never, Props>, 'hooksConfig'>): Promise<void>;
 }
 
 interface MountResultJsx extends Locator {
   unmount(): Promise<void>;
-  update(component: JSX.Element): Promise<void>
+  update(component: JSX.Element): Promise<void>;
 }
 
 export interface ComponentFixtures {
   mount(component: JSX.Element): Promise<MountResultJsx>;
-  mount(component: any, options?: MountOptions): Promise<MountResult>;
-  mount<Props>(component: any, options: MountOptions & { props: Props }): Promise<MountResult<Props>>;
+  mount<HooksConfig extends JsonObject>(
+    component: any,
+    options?: MountOptions<HooksConfig, Record<string, unknown>>
+  ): Promise<MountResult<Record<string, unknown>>>;
+  mount<
+    HooksConfig extends JsonObject,
+    Props extends Record<string, unknown> = Record<string, unknown>
+  >(
+    component: any,
+    options: MountOptions<HooksConfig, never> & { props: Props }
+  ): Promise<MountResult<Props>>;
 }
 
 export const test: TestType<
   PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
-  PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
+  PlaywrightWorkerArgs & PlaywrightWorkerOptions
+>;
 
 export { expect, devices } from '@playwright/test';
diff --git a/packages/playwright-ct-vue2/hooks.d.ts b/packages/playwright-ct-vue2/hooks.d.ts
index 300ad3990c..18147cd857 100644
--- a/packages/playwright-ct-vue2/hooks.d.ts
+++ b/packages/playwright-ct-vue2/hooks.d.ts
@@ -20,5 +20,18 @@ type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
-export declare function beforeMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void;
-export declare function afterMount(callback: (params: { hooksConfig: JsonObject, instance: CombinedVueInstance<Vue, object, object, object, Record<never, any>> }) => Promise<void>): void;
+export declare function beforeMount<HooksConfig extends JsonObject>(
+  callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
+): void;
+export declare function afterMount<HooksConfig extends JsonObject>(
+  callback: (params: {
+    hooksConfig: HooksConfig;
+    instance: CombinedVueInstance<
+      Vue,
+      object,
+      object,
+      object,
+      Record<never, any>
+    >;
+  }) => Promise<void>
+): void;
diff --git a/packages/playwright-ct-vue2/index.d.ts b/packages/playwright-ct-vue2/index.d.ts
index 657e3b1131..e732fa9191 100644
--- a/packages/playwright-ct-vue2/index.d.ts
+++ b/packages/playwright-ct-vue2/index.d.ts
@@ -27,11 +27,11 @@ import type { InlineConfig } from 'vite';
 
 export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   use?: BasePlaywrightTestConfig['use'] & {
-    ctPort?: number,
-    ctTemplateDir?: string,
-    ctCacheDir?: string,
-    ctViteConfig?: InlineConfig
-  }
+    ctPort?: number;
+    ctTemplateDir?: string;
+    ctCacheDir?: string;
+    ctViteConfig?: InlineConfig;
+  };
 };
 
 type JsonPrimitive = string | number | boolean | null;
@@ -41,31 +41,49 @@ type JsonObject = { [Key in string]?: JsonValue };
 
 type Slot = string | string[];
 
-export interface MountOptions<Props = Record<string, unknown>> {
+export interface MountOptions<
+  HooksConfig extends JsonObject,
+  Props extends Record<string, unknown>
+> {
   props?: Props;
   slots?: Record<string, Slot> & { default?: Slot };
   on?: Record<string, Function>;
   hooksConfig?: JsonObject;
 }
 
-interface MountResult<Props = Record<string, unknown>> extends Locator {
+interface MountResult<
+  HooksConfig extends JsonObject,
+  Props extends Record<string, unknown>
+> extends Locator {
   unmount(): Promise<void>;
-  update(options: Omit<MountOptions<Props>, 'hooksConfig'>): Promise<void>
+  update(
+    options: Omit<MountOptions<HooksConfig, Props>, 'hooksConfig'>
+  ): Promise<void>;
 }
 
 interface MountResultJsx extends Locator {
   unmount(): Promise<void>;
-  update(component: JSX.Element): Promise<void>
+  update(component: JSX.Element): Promise<void>;
 }
 
 export interface ComponentFixtures {
   mount(component: JSX.Element): Promise<MountResultJsx>;
-  mount(component: any, options?: MountOptions): Promise<MountResult>;
-  mount<Props>(component: any, options: MountOptions & { props: Props }): Promise<MountResult<Props>>;
+  mount<HooksConfig extends JsonObject>(
+    component: any,
+    options?: MountOptions<HooksConfig, any>
+  ): Promise<MountResult<HooksConfig, any>>;
+  mount<
+    HooksConfig extends JsonObject,
+    Props extends Record<string, unknown> = Record<string, unknown>
+  >(
+    component: any,
+    options: MountOptions<HooksConfig, any> & { props: Props }
+  ): Promise<MountResult<HooksConfig, Props>>;
 }
 
 export const test: TestType<
   PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
-  PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
+  PlaywrightWorkerArgs & PlaywrightWorkerOptions
+>;
 
 export { expect, devices } from '@playwright/test';
diff --git a/tests/components/ct-react-vite/playwright/index.ts b/tests/components/ct-react-vite/playwright/index.ts
index 267e6fd64f..956fc9625f 100644
--- a/tests/components/ct-react-vite/playwright/index.ts
+++ b/tests/components/ct-react-vite/playwright/index.ts
@@ -2,10 +2,14 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks';
 
-beforeMount(async ({ hooksConfig }) => {
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 });
 
-afterMount(async ({}) => {
+afterMount<HooksConfig>(async () => {
   console.log(`After mount`);
 });
diff --git a/tests/components/ct-react-vite/src/tests.spec.tsx b/tests/components/ct-react-vite/src/tests.spec.tsx
index 987dcf5ed1..a639055656 100644
--- a/tests/components/ct-react-vite/src/tests.spec.tsx
+++ b/tests/components/ct-react-vite/src/tests.spec.tsx
@@ -5,6 +5,7 @@ import MultipleChildren from './components/MultipleChildren';
 import MultiRoot from './components/MultiRoot';
 import Counter from './components/Counter';
 import EmptyFragment from './components/EmptyFragment';
+import type { HooksConfig } from '../playwright';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
@@ -101,7 +102,7 @@ test('execute callback when a child node is clicked', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = [];
   page.on('console', m => messages.push(m.text()));
-  await mount(<Button title="Submit" />, {
+  await mount<HooksConfig>(<Button title="Submit" />, {
     hooksConfig: {
       route: 'A'
     }
diff --git a/tests/components/ct-react/playwright/index.html b/tests/components/ct-react/playwright/index.html
index 4f2691ac84..151b6b0138 100644
--- a/tests/components/ct-react/playwright/index.html
+++ b/tests/components/ct-react/playwright/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/playwright/index.js"></script>
+    <script type="module" src="/playwright/index.ts"></script>
   </body>
 </html>
diff --git a/tests/components/ct-react/playwright/index.js b/tests/components/ct-react/playwright/index.ts
similarity index 61%
rename from tests/components/ct-react/playwright/index.js
rename to tests/components/ct-react/playwright/index.ts
index cbed78450e..7da5ae0387 100644
--- a/tests/components/ct-react/playwright/index.js
+++ b/tests/components/ct-react/playwright/index.ts
@@ -1,10 +1,14 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks';
 
-beforeMount(async ({ hooksConfig }) => {
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 });
 
-afterMount(async ({}) => {
+afterMount<HooksConfig>(async () => {
   console.log(`After mount`);
 });
diff --git a/tests/components/ct-react/src/tests.spec.tsx b/tests/components/ct-react/src/tests.spec.tsx
index 049581ac62..3f2eede57b 100644
--- a/tests/components/ct-react/src/tests.spec.tsx
+++ b/tests/components/ct-react/src/tests.spec.tsx
@@ -8,6 +8,7 @@ import MultipleChildren from './components/MultipleChildren';
 import MultiRoot from './components/MultiRoot';
 import Counter from './components/Counter';
 import EmptyFragment from './components/EmptyFragment';
+import type { HooksConfig } from '../playwright';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
@@ -104,7 +105,7 @@ test('execute callback when a child node is clicked', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = [];
   page.on('console', m => messages.push(m.text()));
-  await mount(<Button title="Submit" />, {
+  await mount<HooksConfig>(<Button title="Submit" />, {
     hooksConfig: {
       route: 'A'
     }
diff --git a/tests/components/ct-solid/playwright/index.html b/tests/components/ct-solid/playwright/index.html
index 9c332655e8..c558aa4762 100644
--- a/tests/components/ct-solid/playwright/index.html
+++ b/tests/components/ct-solid/playwright/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/playwright/index.js"></script>
+    <script type="module" src="/playwright/index.ts"></script>
   </body>
 </html>
diff --git a/tests/components/ct-solid/playwright/index.js b/tests/components/ct-solid/playwright/index.ts
similarity index 61%
rename from tests/components/ct-solid/playwright/index.js
rename to tests/components/ct-solid/playwright/index.ts
index 313b081507..438b107ffa 100644
--- a/tests/components/ct-solid/playwright/index.js
+++ b/tests/components/ct-solid/playwright/index.ts
@@ -1,10 +1,14 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-solid/hooks';
 
-beforeMount(async ({ hooksConfig }) => {
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 });
 
-afterMount(async ({}) => {
+afterMount<HooksConfig>(async () => {
   console.log(`After mount`);
 });
diff --git a/tests/components/ct-solid/src/tests.spec.tsx b/tests/components/ct-solid/src/tests.spec.tsx
index 3542e3ef7b..fda162d46b 100644
--- a/tests/components/ct-solid/src/tests.spec.tsx
+++ b/tests/components/ct-solid/src/tests.spec.tsx
@@ -4,6 +4,7 @@ import DefaultChildren from './components/DefaultChildren';
 import MultipleChildren from './components/MultipleChildren';
 import MultiRoot from './components/MultiRoot';
 import EmptyFragment from './components/EmptyFragment';
+import type { HooksConfig } from '../playwright';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
@@ -76,7 +77,7 @@ test('execute callback when a child node is clicked', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = [];
   page.on('console', (m) => messages.push(m.text()));
-  await mount(<Button title="Submit" />, {
+  await mount<HooksConfig>(<Button title="Submit" />, {
     hooksConfig: {
       route: 'A',
     },
diff --git a/tests/components/ct-svelte-vite/playwright/index.ts b/tests/components/ct-svelte-vite/playwright/index.ts
index 17487c90a3..ec3aeb89bd 100644
--- a/tests/components/ct-svelte-vite/playwright/index.ts
+++ b/tests/components/ct-svelte-vite/playwright/index.ts
@@ -1,11 +1,14 @@
-//@ts-check
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks';
 
-beforeMount(async ({ hooksConfig }) => {
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 });
 
-afterMount(async ({}) => {
+afterMount<HooksConfig>(async () => {
   console.log(`After mount`);
 });
diff --git a/tests/components/ct-svelte-vite/src/tests.spec.ts b/tests/components/ct-svelte-vite/src/tests.spec.ts
index 10954cfc32..6ebcc4ee03 100644
--- a/tests/components/ct-svelte-vite/src/tests.spec.ts
+++ b/tests/components/ct-svelte-vite/src/tests.spec.ts
@@ -21,6 +21,7 @@ import DefaultSlot from './components/DefaultSlot.svelte';
 import NamedSlots from './components/NamedSlots.svelte';
 import MultiRoot from './components/MultiRoot.svelte';
 import Empty from './components/Empty.svelte';
+import type { HooksConfig } from '../playwright';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
@@ -102,7 +103,7 @@ test('render a component with a named slot', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(Button, {
+  await mount<HooksConfig>(Button, {
     props: {
       title: 'Submit'
     },
diff --git a/tests/components/ct-svelte/playwright/index.ts b/tests/components/ct-svelte/playwright/index.ts
index 33958be194..fa00674fde 100644
--- a/tests/components/ct-svelte/playwright/index.ts
+++ b/tests/components/ct-svelte/playwright/index.ts
@@ -2,10 +2,14 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks';
 
-beforeMount(async ({ hooksConfig }) => {
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 });
   
-afterMount(async ({}) => {
+afterMount<HooksConfig>(async () => {
   console.log(`After mount`);
 });
diff --git a/tests/components/ct-svelte/src/tests.spec.ts b/tests/components/ct-svelte/src/tests.spec.ts
index ce169e01e5..576b5c2acf 100644
--- a/tests/components/ct-svelte/src/tests.spec.ts
+++ b/tests/components/ct-svelte/src/tests.spec.ts
@@ -22,6 +22,7 @@ import DefaultSlot from './components/DefaultSlot.svelte';
 import NamedSlots from './components/NamedSlots.svelte'
 import MultiRoot from './components/MultiRoot.svelte';
 import Empty from './components/Empty.svelte';
+import type { HooksConfig } from '../playwright';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
@@ -108,7 +109,7 @@ test('render a component without options', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(Button, {
+  await mount<HooksConfig>(Button, {
     props: {
       title: 'Submit'
     },
diff --git a/tests/components/ct-vue-cli/playwright/index.html b/tests/components/ct-vue-cli/playwright/index.html
index 7a654f3a79..1df0630093 100644
--- a/tests/components/ct-vue-cli/playwright/index.html
+++ b/tests/components/ct-vue-cli/playwright/index.html
@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/playwright/index.js"></script>
+    <script type="module" src="/playwright/index.ts"></script>
   </body>
 </html>
diff --git a/tests/components/ct-vue-cli/playwright/index.js b/tests/components/ct-vue-cli/playwright/index.ts
similarity index 64%
rename from tests/components/ct-vue-cli/playwright/index.js
rename to tests/components/ct-vue-cli/playwright/index.ts
index 2139a9c94e..c9951c0163 100644
--- a/tests/components/ct-vue-cli/playwright/index.js
+++ b/tests/components/ct-vue-cli/playwright/index.ts
@@ -2,10 +2,14 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
 
-beforeMount(async ({ app, hooksConfig }) => {
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
 });
 
-afterMount(async ({ instance }) => {
+afterMount<HooksConfig>(async ({ instance }) => {
   console.log(`After mount el: ${instance.$el.constructor.name}`);
 });
diff --git a/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx b/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx
index ed6ce408d0..b21002e3cc 100644
--- a/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx
+++ b/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx
@@ -5,6 +5,7 @@ import DefaultSlot from './components/DefaultSlot.vue'
 import NamedSlots from './components/NamedSlots.vue'
 import MultiRoot from './components/MultiRoot.vue'
 import EmptyTemplate from './components/EmptyTemplate.vue'
+import type { HooksConfig } from '../playwright'
 
 test.use({ viewport: { width: 500, height: 500 } })
 
@@ -83,7 +84,7 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(<Button title="Submit" />, {
+  await mount<HooksConfig>(<Button title="Submit" />, {
     hooksConfig: { route: 'A' }
   })
   expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])
diff --git a/tests/components/ct-vue-cli/src/notation-vue.spec.ts b/tests/components/ct-vue-cli/src/notation-vue.spec.ts
index 3c1858015d..2ba1be9ba3 100644
--- a/tests/components/ct-vue-cli/src/notation-vue.spec.ts
+++ b/tests/components/ct-vue-cli/src/notation-vue.spec.ts
@@ -6,6 +6,7 @@ import NamedSlots from './components/NamedSlots.vue'
 import MultiRoot from './components/MultiRoot.vue'
 import Component from './components/Component.vue'
 import EmptyTemplate from './components/EmptyTemplate.vue'
+import type { HooksConfig } from '../playwright'
 
 test.use({ viewport: { width: 500, height: 500 } })
 
@@ -89,7 +90,7 @@ test('render a component without options', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(Button, {
+  await mount<HooksConfig>(Button, {
     props: {
       title: 'Submit'
     },
diff --git a/tests/components/ct-vue-vite/playwright/index.html b/tests/components/ct-vue-vite/playwright/index.html
index d589c5584c..027cbc1eb2 100644
--- a/tests/components/ct-vue-vite/playwright/index.html
+++ b/tests/components/ct-vue-vite/playwright/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/playwright/index.js"></script>
+    <script type="module" src="/playwright/index.ts"></script>
   </body>
 </html>
diff --git a/tests/components/ct-vue-vite/playwright/index.js b/tests/components/ct-vue-vite/playwright/index.ts
similarity index 64%
rename from tests/components/ct-vue-vite/playwright/index.js
rename to tests/components/ct-vue-vite/playwright/index.ts
index 2139a9c94e..c9951c0163 100644
--- a/tests/components/ct-vue-vite/playwright/index.js
+++ b/tests/components/ct-vue-vite/playwright/index.ts
@@ -2,10 +2,14 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
 
-beforeMount(async ({ app, hooksConfig }) => {
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
 });
 
-afterMount(async ({ instance }) => {
+afterMount<HooksConfig>(async ({ instance }) => {
   console.log(`After mount el: ${instance.$el.constructor.name}`);
 });
diff --git a/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx b/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx
index 82e84e6275..3786fa0b62 100644
--- a/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx
+++ b/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx
@@ -5,6 +5,7 @@ import DefaultSlot from './components/DefaultSlot.vue'
 import NamedSlots from './components/NamedSlots.vue'
 import MultiRoot from './components/MultiRoot.vue'
 import EmptyTemplate from './components/EmptyTemplate.vue'
+import type { HooksConfig } from '../playwright'
 
 test.use({ viewport: { width: 500, height: 500 } })
 
@@ -113,7 +114,7 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(<Button title="Submit" />, {
+  await mount<HooksConfig>(<Button title="Submit" />, {
     hooksConfig: { route: 'A' }
   })
   expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])
diff --git a/tests/components/ct-vue-vite/src/notation-vue.spec.ts b/tests/components/ct-vue-vite/src/notation-vue.spec.ts
index 7f988e77d6..dbc7a0d4e9 100644
--- a/tests/components/ct-vue-vite/src/notation-vue.spec.ts
+++ b/tests/components/ct-vue-vite/src/notation-vue.spec.ts
@@ -7,6 +7,7 @@ import NamedSlots from './components/NamedSlots.vue'
 import MultiRoot from './components/MultiRoot.vue'
 import Component from './components/Component.vue'
 import EmptyTemplate from './components/EmptyTemplate.vue'
+import type { HooksConfig } from '../playwright'
 
 test.use({ viewport: { width: 500, height: 500 } })
 
@@ -118,7 +119,7 @@ test('render a component without options', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(Button, {
+  await mount<HooksConfig>(Button, {
     props: {
       title: 'Submit'
     },
diff --git a/tests/components/ct-vue2-cli/playwright/index.html b/tests/components/ct-vue2-cli/playwright/index.html
index 7a654f3a79..1df0630093 100644
--- a/tests/components/ct-vue2-cli/playwright/index.html
+++ b/tests/components/ct-vue2-cli/playwright/index.html
@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/playwright/index.js"></script>
+    <script type="module" src="/playwright/index.ts"></script>
   </body>
 </html>
diff --git a/tests/components/ct-vue2-cli/playwright/index.js b/tests/components/ct-vue2-cli/playwright/index.ts
similarity index 87%
rename from tests/components/ct-vue2-cli/playwright/index.js
rename to tests/components/ct-vue2-cli/playwright/index.ts
index 966d595c23..90677834ed 100644
--- a/tests/components/ct-vue2-cli/playwright/index.js
+++ b/tests/components/ct-vue2-cli/playwright/index.ts
@@ -2,6 +2,10 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-vue2/hooks';
 
+export type hooksConfig = {
+  route: string;
+}
+
 beforeMount(async ({ hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 });
diff --git a/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx b/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx
index 797d08f44c..087d96b31e 100644
--- a/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx
+++ b/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx
@@ -4,6 +4,7 @@ import Counter from './components/Counter.vue'
 import DefaultSlot from './components/DefaultSlot.vue'
 import NamedSlots from './components/NamedSlots.vue'
 import EmptyTemplate from './components/EmptyTemplate.vue'
+import type { hooksConfig } from '../playwright'
 
 test.use({ viewport: { width: 500, height: 500 } })
 
@@ -113,7 +114,7 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(<Button title="Submit" />, {
+  await mount<hooksConfig>(<Button title="Submit" />, {
     hooksConfig: { route: 'A' }
   })
   expect(messages).toEqual(['Before mount: {\"route\":\"A\"}', 'After mount el: HTMLButtonElement'])
diff --git a/tests/components/ct-vue2-cli/src/notation-vue.spec.ts b/tests/components/ct-vue2-cli/src/notation-vue.spec.ts
index 7126d093f8..515399be8a 100644
--- a/tests/components/ct-vue2-cli/src/notation-vue.spec.ts
+++ b/tests/components/ct-vue2-cli/src/notation-vue.spec.ts
@@ -5,6 +5,7 @@ import DefaultSlot from './components/DefaultSlot.vue'
 import NamedSlots from './components/NamedSlots.vue'
 import Component from './components/Component.vue'
 import EmptyTemplate from './components/EmptyTemplate.vue'
+import type { hooksConfig } from '../playwright'
 
 test.use({ viewport: { width: 500, height: 500 } })
 
@@ -122,7 +123,7 @@ test('render a component without options', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(Button, {
+  await mount<hooksConfig>(Button, {
     props: {
       title: 'Submit'
     },